CSS子导航问题

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

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

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


}

链接的jsfiddle

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

来源

2013-02-14 user1016078

菜单规则＃1：不要将样式添加到列表本身，而不是display/position/float。将所有其他样式放在显示：块的A-标签上。 – 2013-02-14 19:29:27

您应该使用padding-top:5px和这里面的黑色填充子DOM元素

来源

2013-02-14 19:31:59

边境顶：5px的固体#FFF;

这会给菜单和子菜单之间的空间外观。，并仍然会提供功能。

来源

2013-02-14 19:56:50

您可以使用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标签。

希望这有助于！

来源

2013-02-14 20:02:19 Kingk

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

来源

2013-02-14 20:05:42

CSS子导航问题

回答

相关问题