HTML/CSS下拉菜單，想要使它的背景固定寬度

我使用文章SuckerFish Dropdowns中的HTML/CSS菜單。我的特定菜單背景爲灰色。我試圖讓菜單的背景有一個固定的寬度。我嘗試在CSS中的#navbar部分添加寬度參數，但似乎沒有做任何事情。我如何獲得這種固定寬度的行爲？HTML/CSS下拉菜單，想要使它的背景固定寬度

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：

來源

2012-02-26 fred basset

不要鏈接代碼，確保它是在你的問題。 – 2012-02-26 19:42:03

#navbar採取適當的寬度，但它沒有設置background-color，所以默認情況下它是透明的。

從#navbar li a刪除background-color並將其添加到#navbar。你也將需要刪除的高度和清除浮動才能正常工作：

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

工作例如：http://jsfiddle.net/UfuG2/

來源

2012-02-26 19:49:44

謝謝，它的工作很好:) – 2012-02-26 20:50:12

由於您正在浮動菜單列表項，因此您需要在無序列表上放置一個clearfix。然後你可以在ul上設置寬度和背景顏色。退房http://jsfiddle.net/qT7xs/。

來源

2012-02-26 19:47:29

HTML/CSS下拉菜單，想要使它的背景固定寬度

回答

相關問題