html - 如何将悬停时的下拉菜单定位到所需位置？

Question

我想创建这个菜单，悬停时会出现一个下拉菜单，通常我可以毫不费力地将 UL 设置为 top:100%。然而这次我需要它更进一步，但它需要精确以便跨浏览器友好。所以我尝试的是为 UL 容器设置一个 margin-top:17px 以将其从顶部推开并且有效但是一旦我将鼠标悬停在它上面，下拉菜单就会关闭。我在示例中添加了一个红色边框，以显示我希望下拉列表 UL 顶部开始的位置。

请看-> Link to example

Answer 1

您应该使用 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 下)。