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

Question

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

请看一下->示例链接

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);}

此外，您需要将背景声明从ulto移动，li因为padding会将项目移动到所需位置，但背景会显示错误（在 parent 下方li）。

Answer 2

尝试更改margin-top为padding-top- http://jsfiddle.net/BZpLf/2/

#main-nav ul ul {display:none;position:absolute;top:100%;left:0;padding-top:17px;min-width:150px;background-color:#272727;opacity:0.8;filter:alpha(opacity=80);}

背景颜色也从更改#000为#272727

Answer 3

而不是替换margin-top为padding-top（这需要更改背景设置），只需添加一个间隔元素来弥合 parentli和 dropdown之间的差距ul。看我的演示。

请注意ul.

或者，如果您不想添加额外的元素，请:after在父li a元素上使用伪选择器，请参阅我的第二个演示。这是额外的 CSS（就是这样，不需要更多更改）：

#main-nav > ul > li:hover > a:after { 
  content: ""; 
  display: block; 
  min-height: 17px;
  position: absolute;
  top: 100%;
  left:0;
  min-width:150px;
}