帶自動列表的下拉菜單 - 項目寬度

因此，我在下拉菜單上工作，我希望每個菜單項具有自動寬度。即背景擴大到菜單項的寬度，而不是對所有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

帶自動列表的下拉菜單 - 項目寬度

回答

相關問題