Исправлено: см. Обновление внизу
Я занимаюсь разработкой простого выпадающего меню только для CSS, но у меня возникла проблема, при которой подменю исчезает, когда мышь входит вВысотой в 4 пикселя только внутри первого элемента подменю (фон: hover первого элемента подменю изменяется, поэтому мышь наводит курсор на первый элемент подменю до его исчезновения).Если вы очень быстро наведите указатель мыши на остальное подменю, то подменю будет работать по вашему усмотрению.Это проблема во всех основных браузерах (FF, Safari, Chrome, IE), но, как ни странно, она ВСЕГДА этого не делает.Время от времени я загружаю страницу, и она отлично работает, даже когда я намеренно помещаю мышь в проблемное место.Соответствующий код ниже:
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;
}
Один LI из #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>
Обновление: появился плагин, который я не использовалне знаю (работает с чьим-то существующим кодом), что помещал невидимый div в область, которая доставляла мне проблемы.