CSS下拉菜單 - incorect子菜單尺寸

Question

我做了一個CSS水平導航菜單。 如何使子菜單寬度自動調整到其內容？ 就像主菜單一樣。

我的CSS：http://pastebin.com/Kpx4s3fH

文本只是折返下來。

編輯：和HTML http://pastebin.com/xaC0kvud

Answer 1

試試這個：

#nav ul a { 
     display: block; 
     height:25px; 
     padding: 0 20px;/*changeto width for static size*/ 
     line-height:25px; 
     background: rgba(24,24,24,1.0); 
     /* text-align:center; */ 
     border: 1px solid grey; 
     border-radius: 0px 0px 0px 0px; 
     width: 100%; 
} 

http://jsfiddle.net/aunbyw9L/

Answer 2

不知道是否可以解決您的問題，但在現實中，唯一真正的問題是，你有一個明確的高度設置。 height:25px;是導致版本號溢出其容器的原因。他們是他們的寬度，因爲父母li。塊級元素默認爲100% ish寬度。 （與填充有些差別，如果要將塊元素重置爲默認值，則使用width:auto）。所有這一切都不利於你。 position:absolute元素正試圖在寬度上匹配它們的父元素。你可以做的兩件事是刪除height:25px並允許line-height:25px保持你的身高（這將導致所有的文字都在你的li中，但它們只會和父母li一樣寬），或者你可以給li a的white-space:nowrap。我個人更喜歡第二種方法。您可能遇到的錯誤是由於缺少包裝（顯然）而導致屏幕外顯示的長名稱。這裏是規則和演示：

http://jsfiddle.net/81un9gaa/（檢查項目2.2.2）

#nav ul a { 
    display: block; 
    /*height:25px;*/ /* remove this */ 
    padding: 0 20px;/*changeto width for static size*/ 
    line-height:25px; 
    background: rgba(24,24,24,1.0); 
    text-align:center; 
    border: 1px solid grey; 
    border-radius: 0px 0px 0px 0px; 

    /* this one is optional, but I prefer it 
     in most cases. */ 
    white-space:nowrap; 
}