Question

所以我正在开发一个下拉菜单，我希望每个菜单项都有一个自动宽度。即，背景扩展到菜单项的宽度，而不是具有所有UL的整体固定宽度。我认为给ul li一个自动宽度会对它进行排序，但似乎没有。我错过了什么？

<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

Answer 1

您的#nav li样式正在应用于所有子li元素，因此您需要使用“＆gt;”，它只选择直接子项。

这是更新的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;
}

Answer 2

您正在使用display: block作为链接。这导致他们填补了可用空间。这就是为什么它们都是相同的宽度。而float: right正在促成普遍的狭隘性。使用inline-block代替block并使用white-space: nowrap阻止链接包装：

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

具有自动列表项宽度的下拉菜单

2 个答案: