HTML/CSSドロップダウンメニュー、背景を固定幅にしたい

Question

記事SuckerFish DropdownsのHTML/CSSメニューを使用しています。私の特定のメニューには灰色の背景があります。私はメニューの背景を固定幅にするようにしています。 CSSの#navbarセクションにwidthパラメータを追加しようとしましたが、それは何もしていないようです。この固定幅の動作をどうやって得るのですか？

HTML

<ul id="navbar"> 
    <!-- The strange spacing herein prevents an IE6 whitespace bug. --> 
    <li><a href="index.html">System Set-Up &amp; Status</a> 
    </li> 
    <li><a href="#">NMEA Output</a> 
     <ul> 
      <li><a href="ch1.html">Channel 1</a></li><li> 
       <a href="ch2.html">Channel 2</a></li><li> 
       <a href="ch3.html">Channel 3</a></li><li> 
       <a href="ch4.html">Channel 4</a></li></ul> 
    </li> 
    <li><a href="#">UDP Output</a> 
     <ul> 
      <li><a href="udpch1.html">Channel 1</a></li><li> 
       <a href="udpch2.html">Channel 2</a></li><li> 
       <a href="udpch3.html">Channel 3</a></li><li> 
       <a href="udpch4.html">Channel 4</a></li><li></li></ul> 
     </li> 
     <li><a href="baro.html">Baro/PoE</a> 
     </li> 
     <li><a href="advanced.html">Advanced</a> 
     </li> 
    <li><a href="mob.html">MOB</a> 
    </li> 
</ul> 

CSS

#navbar { 
    margin: 0; 
    padding: 0; 
    height: 1em; } 
#navbar li { 
    list-style: none; 
    float: left; } 
#navbar li a { 
    display: block; 
    padding: 3px 8px; 
    background-color: #cccccc; 
    color: #000000; 
    text-decoration: none; } 
#navbar li a:hover { 
    background-color: #999999; } 
#navbar li ul { 
    display: none; 
    width: 10em; /* Width to help Opera out */ 
    background-color: #69f;} 
#navbar li:hover ul, #navbar li.hover ul { 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; } 
#navbar li:hover li, #navbar li.hover li { 
    float: none; } 
#navbar li:hover li a, #navbar li.hover li a { 
    background-color: #c0c0c0; 
    border-bottom: 1px solid #fff; 
    color: #000; } 
#navbar li li a:hover { 
    background-color: #999999; } 

CSS snippet is hereとHTML snippet is here

jsfiddle of question：

Answer 1

#navbarは適切な幅ですが、background-colorが設定されていないため、デフォルトでは透過です。

background-colorを#navbar li aから削除し、代わりに#navbarに追加してください。また、高さを削除し、それが正しく動作するためにあなたのフロートをクリアする必要があります。

#navbar { 
    background-color: #cccccc; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; /*clear floats */ 
} 

例の作業：http://jsfiddle.net/UfuG2/

Answer 2

あなたはメニューリスト項目を浮かべているので、順序付けられていないリストにクリアフィックスを入れたいと思うでしょう。次に、ulに幅と背景色を設定することができます。 http://jsfiddle.net/qT7xs/をチェックしてください。