sub menu border calls onmouseout event

Question

I've created a simple menu and submenu with tags(not allowed to use ul elements). To access the submenu the user hovers their mouse over the menu item. I use the onmouseover and onmouseout events to either show or hide the sub menu depending on which item is selected. A pipe (|) is used to seperate each submenu item and this is what is causing me problems.

When a user hovers their mouse above the pipe character the subMenu div calls the onmouseout event which is not what I want. So I added padding around the pipe character and a minus margin so that there were no gaps between the pipe character and the other elements.

This worked for all browsers including IE8. But in IE7 (I haven't tested IE6 yet) the submenu div calls the onmouseout event when I touch the top bit of either the left or right border of the pipe character span element.

    <div id="subMenu" onmouseout="hideSubMenu()" >
        <div id="opinionSubMenu" onmouseover="showOpinionSubMenu()"> 
            <a id="Blogs" href="HTMLNew.htm">BLOGS</a>
            <span class="SubMenuDelimiter">|</span>
            <a id="Comments" href="HTMLNew.htm">COMMENTS</a>
            <span class="SubMenuDelimiter">|</span>
            <a id="Views" href="HTMLNew.htm">VIEWS</a>                 
        </div>
        <div id="learningSubMenu" onmouseover="showLearningSubMenu()">
            <a id="Articles" href="HTMLNew.htm">ARTICLES</a>
            <span class="SubMenuDelimiter">|</span>
            <a id="CoursesCases" href="HTMLNew.htm">COURSES & CASES</a>
            <span class="SubMenuDelimiter">|</span>
            <a id="PracticeImpact" href="HTMLNew.htm">PRACTICE IMPACT</a>                           
        </div>            
    </div>

This is my css class

#subMenu{
padding:10px 0px;
background-color:#F58F2D;
font-weight:normal;
text-decoration:none;        
font-family:Lucida Sans Unicode;
font-size:14px;    
float:left;
width:100%;
display:none;}

#Blogs, #Comments, #Views, #Articles
{        
     padding:10px 5px;
     background:none repeat scroll 0 0 transparent;
     color:#000000;
     font-weight:normal;
     text-decoration:none;
     border:solid 1px black;}

#Blogs:hover, #Comments:hover, #Views:hover, #Articles:hover{
color:#ffffff;
text-decoration:none;}

.SubMenuDelimiter{
padding:10px 5px;    
margin:10px -5px;}

i don't know why I can't use those elements.The lead designer asked me not to use them. Perhaps it doesn't work so well on the mac??? — insanepaul
These elements are designed to make lists and menus just liek this, it's the standard way of making menus. I would talk to your lead designer. — Kyle
I've changed the divs to ul and li so that i can show lead designer and I'm back to square 1 where i hover over a section between the li's and the onmouseout event is fired — insanepaul

David Hobs David Hobs · Accepted Answer · 2011-09-16T23:48:58

This might be better as a comment, but I don't have the privilege yet. :-/

My first thought is trying z-index. If that doesn't work, what about using border-left or right instead?

If nothing else, I'd use a background image. Heck, you can get much better looking pipes anyway!

Haha, I just thought of an absolutely terrible solution. Use :after pseudo class with content:"|"; IE 7 and below don't support :after, but we don't care about them anyway, right? lol.

sub menu border calls onmouseout event

1 Answers