CSS Dropdown Menu working intermitently in all browsers

Fixed see update at bottom

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;  开发者_C百科 
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>

Update: There was a plugin I wasn't aware of (working with someoneelse's existing code) that was putting an invisble div over the area that was causing me problems.

Be warned that the :hover pseudo class on elements other than anchors is not supported by, guess who? Yes, IE, as usual.. Have a look at this article, it's quite old, but it's still good, and it seems to fit your case.. Suckerfish Dropdowns on A List Apart