我想创建这个菜单,悬停时会出现一个下拉菜单,通常我可以毫不费力地将 UL 设置为 top:100%。然而这次我需要它更进一步,但它需要精确以便跨浏览器友好。所以我尝试的是为 UL 容器设置一个 margin-top:17px 以将其从顶部推开并且有效但是一旦我将鼠标悬停在它上面,下拉菜单就会关闭。我在示例中添加了一个红色边框,以显示我希望下拉列表 UL 顶部开始的位置。
请看-> Link to example
最佳答案
您应该使用 padding-top
而不是 margin-top
(因为边距在元素之外并中断悬停事件):
#main-nav ul ul {display:none;position:absolute;top:100%;left:0;padding-top:17px;min-width:150px;}
#main-nav ul ul li {background-color:#000;opacity:0.8;filter:alpha(opacity=80);}
您还需要将背景声明从 ul
移动到 li
,因为 padding
会将元素移动到所需位置,但背景会显示错误(在父 li
下)。
关于html - 如何将悬停时的下拉菜单定位到所需位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10873796/