Question

已修复，请参阅底部的更新

我正在开发一个简单的仅限CSS的下拉菜单，但我遇到一个问题，当鼠标在子菜单的第一项内部进入3-4px高的部分时子菜单消失（：悬停背景第一个子菜单项改变，因此鼠标在消失之前将鼠标悬停在第一个子菜单项上。如果将鼠标快速移动到其上并进入子菜单的其余部分，子菜单将根据需要起作用。这是所有主流浏览器（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;  
}

来自#Nav UL的一个LI

<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。

Answer 1

警告不支持锚点以外的元素上的:hover伪类，猜猜是谁？是的，IE，像往常一样.. 看看这篇文章，它已经很老了，但它仍然很好，它似乎适合你的情况.. Suckerfish Dropdowns on A List Apart

CSS下拉菜单在所有浏览器中间歇工作

1 个答案: