I'm developing a simple CSS-only dropdown menu but I'm having an issue in which the submenu disappears when the mouse enters a 3-4px tall section just inside the first item on the submenu (the :hover background of the first submenu item changes so the mouse is hovering over the first submenu item prior to it disappearing). If you move the mouse very quickly over it and into the rest of the submenu the submenu functions as desired. This is a problem across all major browsers (FF, Safari, Chrome, IE), but strangely it doesn't ALWAYS do it. Every once in awhile I'll load the page and it works perfectly even when I intentionally put the mouse in the problem location. Relevant code below:
CSS
#Nav{ /* The top level UL */
clear:right;
float:right;
width:auto;
margin-top:7px;
}
#Nav li{
float:left;
position:relative;
line-height:30px;
padding:0;
background:#086A9F url(/Content/images/NavTab_grad.png) repeat-x center top;
font-size:13px;
z-index:999;
margin:0 0 0 1px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border:1px solid transparent;
}
#Nav li ul{ /*Submenu UL */
display:none;
}
#Nav li:hover ul{
display:block;
position:absolute;
left:-1px;
background:#fff;
z-index:1000;
border:1px solid #ccc;
border-top:none;
width:200px;
top:31px;
}
#Nav li ul li{
background:#fff;
float:none;
border-bottom:1px solid #eee;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#Nav li ul li:hover{
background:#d3e4ef;
}
One LI from the #Nav UL
<li id="NavReports"><a href="#">Reporting</a>
<ul>
<li id="NavReportsCourse"><a href="/rpts/courseedit">Course Report</a></li>
<li id="NavReportsPortal"><a href="/rpts/portaledit">Portal Report</a></li>
<li id="NavWorkflowsManage"><a href="/workflows">Workflows</a></li>
</ul>
</li>