CSS導航欄自動高度

-1

我想設置導航器的第二個層次是自動的高度，當太長更改爲新的生產線。

HTML：

<ul id="menu"> 
    <li><a href="">About Us</a> 
     <ul> 
      <li><a href="">Introduction</a></li> 
      <li><a href="">Orgaizational Structure</a></li> 
      <li><a href="">Mission&Vision</a></li> 
     </ul> 
    </li> 
</ul>

CSS：

* { 
    padding: 0; 
    margin: 0; 
} 

#menu { 
    list-style: none; 
    font-size: 0.8em; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px 0 #cccccc; 
    box-shadow: 0 2px 5px 0 #aaa; 

    background: #dddddd; 
    height: 40px; 
    width: 800px; 
    float: left; 
} 

#menu li { 
    display: block; 
    position: relative; 
    float: left; 
} 

#menu li ul { 
    display: none; 
} 

#menu li a { 
    display: block; 
    text-decoration: none; 
    padding: 12px 15px; 
    margin-left: 1px; 
    white-space: nowrap; 
} 

#menu li:hover ul { 
    display: block; 
    position: absolute; 
    background: #dddddd; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px 0 #cccccc; 
    box-shadow: 0 2px 5px 0 #aaa; 
    width: 100px; 
}

這裏運行：http://jsfiddle.net/U72Hm/

來源

2014-01-11 Ovilia

你的小提琴似乎（至少在firefox中）正確顯示高度，請你能更清楚地解釋你的問題是什麼？ – Alfie

@Alfie所顯示的圖像是當前的樣式，而不是理想的樣式。在理想的情況下，「結構」應該是一個新的路線。 – Ovilia

我不知道你在問什麼，但如果你希望你的文字換行到一個新行，請將white-space:no-wrap;更改爲white-space:normal，menu li a{...}。

來源

2014-01-11 02:35:20

謝謝，這正是我想要的。 – Ovilia

沒問題。你實際上可以把這個排除在一起。大多數瀏覽器默認爲空白：正常。 – 2014-01-11 02:45:02

雖然這個問題在技術上並不能解答問題，但菜單的一些優秀資源http://www.cssplay.co.uk/menus/解釋了爲什麼做出某些CSS決定和瀏覽器。

來源

2014-01-11 02:37:20 click2install

CSS導航欄自動高度

回答

相關問題