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