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;}
