Question

我想创建这个菜单，在这里出现一个下拉菜单，通常我会毫不费力地将UL设置为top：100％。然而，这次我需要它进一步向下，但它需要精确，因此它是跨浏览器友好。所以我尝试的是设置一个margin-top：17px到UL容器以将其推离顶部并且可以工作但是只要我将鼠标悬停在它上面，下拉菜单就会关闭。我在示例中添加了一个RED边框，以显示我希望下拉UL顶部开始的位置。

请看一下 - ＆gt; 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会将项目移至所需位置，但背景将显示错误（正在父{{ 1}}）。

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（需要更改背景设置），只需添加一个spacer元素来弥合父li和下拉列表ul之间的差距。查看我的demo。

请注意ul之前的额外（空）div。

或者，如果您不想添加额外元素，请使用父:after li元素上的伪选择器a，查看我的second demo。这是额外的CSS（就是这样，不再需要更改）：

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

如何将鼠标悬停在所需位置的下拉菜单？

3 个答案: