CSS子导航问题

Question

我正在尝试在“珠宝”下实施子导航菜单。问题是我打开两个菜单之间需要一个空格。为实现这一目标，我添加了“margin-top：5px;”到子导航。它确实创建了空间，但是当我将鼠标向下移动到子导航时它会被取消选中。

实现这一目标的正确方法是什么？

nav ul ul {
margin-top:5px;
background-color: #101010;
color: #FFF;


}

链接到jsfiddle

http://jsfiddle.net/2mpcQ/4/

Answer 1

你应该在这个填充的DOM元素

中使用padding-top:5px和黑色子菜单

Answer 2

border-top：5px solid #fff;

这将在菜单和子菜单之间显示空格。 并仍然会给它功能。

Answer 3

您可以使用div标签子菜单来获得所需的垂直空间。我修改了你的jsfiddle以供参考。

.rowheight {background: #fff; font-size: 5px;}  

 <ul>
  <li>
    <div class="rowheight">&nbsp;</div>
    <ul><li>Item</li></ul>
  </li>
</ul>

jsfiddle链接 -

http://jsfiddle.net/2mpcQ/25/

或者可以使用border-top: 5px solid #fff;来嵌套ul，但它不可控制。它将影响所有嵌套的UL标签。

希望这有帮助！

Answer 4

如果您只想解决此问题，请尝试将border-top添加到.nav ul ul（border-top:5px solid #fff;）。但是，你的问题是“实现这个目标的正确方法是什么？”。正如迪奥杜斯所说，我认为正确的方式是塑造“a”元素。