Issue Resolved - See Update Below
While working on creating a CSS-only dropdown menu, I encountered an issue where the submenu would disappear when the mouse entered a small 3-4px section within the first item on the submenu. Even though this problem occurred consistently across major browsers (Firefox, Safari, Chrome, IE), there were rare instances where it worked perfectly. Here is the relevant code:
CSS
#Nav{ /* Styles for 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;
border-radius: 3px;
border:1px solid transparent;
}
#Nav li ul{ /* Styles for 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;
border-radius: 0px;
}
#Nav li ul li:hover{
background:#d3e4ef;
}
Update
After some investigation, I discovered that a plugin was causing an invisible div to cover the problematic area, which was the root cause of the issue.