带自动列表的下拉菜单 - 项目宽度

因此，我在下拉菜单上工作，我希望每个菜单项具有自动宽度。即背景扩大到菜单项的宽度，而不是对所有UL具有整体固定的宽度。我认为给ul自动宽度会分类，但似乎不是。我错过了什么？带自动列表的下拉菜单 - 项目宽度

<ul id="nav"> 
<li><a class="last" href="#">MENU &#9660;</a> 
    <ul> 
     <li><a href="#">Short</a></li> 
     <li><a href="#">Very Long</a></li> 
    </ul> 
</li>

#nav { 
height: 1; 
list-style-type: none; 
padding-top: 1.25em; 
margin-top: 0em; 
} 

#nav li { 
float: right; 
position: relative; padding: 0; 
} 

#nav li a { 
display: block; 
font-size: 14px; 
padding: 0 1em; 
margin-bottom: 1em; 
color: #333; 
text-decoration: none; 
border-left: 1px solid #333; 
} 

#nav .last, #nav li ul li a { 
border-left: none; 
} 

#nav li a:hover, #nav li a:focus { 
color: #666; 
} 

#nav li ul { 
opacity: 0; 
position: absolute; 
right: 0em; 
list-style-type: none; 
padding: 0; margin: 0; 
} 

#nav li:hover ul { 
opacity: 1; 
} 

#nav li ul li { 
float: none; 
position: static; 
width: auto; 
height: 0; 
line-height: 0; 
background: none; 
text-align: right; 
margin-bottom: .75em; 
} 

#nav li:hover ul li { 
height: 25px; 
line-height: 2.5em; 
} 

#nav li ul li a { 
background: #222; 
} 

#nav li ul li a:hover { 
color: #666; 
}

Mockup

来源

2012-03-06 Jedda

你#nav李风格被应用到所有子li元素，所以你需要使用“>” ，它只选择直接的孩子。

这里更新了修复问题的CSS。我也注释掉这是干扰其他一些CSS：

#nav { 
    height: 1; 
    list-style-type: none; 
    padding-top: 1.25em; 
    margin-top: 0em; 
} 

#nav > li { /* Added ">" */ 
    float: right; 
    position: relative; 
    padding: 0; 
} 

#nav li a { 
    display: inline-block; /* was block */ 
    font-size: 14px; 
    padding: 0 1em; 
    margin-bottom: 1em; 
    color: #333; 
    text-decoration: none; 
    border-left: 1px solid #333; 
} 

#nav .last, #nav li ul li a { 
    border-left: none; 
} 

#nav li a:hover, #nav li a:focus { 
    color: #666; 
} 

#nav li ul { 
    opacity: 0; 
    /*position: absolute; 
    right: 0em; */ 
    list-style-type: none; 
    padding: 0; margin: 0; 
} 

#nav li:hover ul { 
    opacity: 1; 
} 

#nav li ul li { 
    /*float: none; 
    position: static; 
    width: auto;*/ 
    height: 0; 
    line-height: 0; 
    background: none; 
    text-align: right; 
    margin-bottom: .75em; 
} 

#nav li:hover ul li { 
    height: 25px; 
    line-height: 2.5em; 
}

来源

2012-03-06 21:41:59

太棒了！这样做:-)谢谢 – Jedda 2012-03-06 21:47:03

这真棒 - 谢谢。我正在使用Sass，并且我了解到您可以在sass结构中的元素之前添加'>'字符。（'''和'li'之间有空格所以像： .nav { > ul {} } – itsricky 2014-02-26 00:27:30

您正在使用display: block为自己的链接。这会导致他们填补可用空间。这就是为什么他们都是一样的宽度。而float: right正在造成一般的狭隘。使用inline-block代替block，防止链路包装用white-space: nowrap：

演示：http://jsfiddle.net/neJty/2/

来源

2012-03-06 21:00:52 gilly3

@ gill3道歉....我解释什么，我不好的意思，所以我已经附上样机。 – Jedda 2012-03-06 21:19:48

感谢您的反馈！ – Jedda 2012-03-06 21:49:33

@Jedda - 明白了。更新了我的答案。 – gilly3 2012-03-06 21:58:21

带自动列表的下拉菜单 - 项目宽度

回答

相关问题