HTML/CSS 드롭 다운 메뉴에서 배경을 고정 폭으로 지정하려고합니다

Question

SuckerFish Dropdowns에서 HTML/CSS 메뉴를 사용하고 있습니다. 내 특정 메뉴는 회색 배경입니다. 메뉴의 배경을 고정 너비로 ​​설정하려고합니다. CSS의 #navbar 섹션에 너비 매개 변수를 추가하려고했지만 아무 것도하지 않는 것 같습니다. 이 고정 폭 동작을 어떻게 얻습니까?

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

CSS snippet is here

#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; } 

과 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 */ 
} 

근무 예 :

Answer 2

메뉴 목록 항목을 떠 다니므로 정렬되지 않은 목록에 clearfix를 넣어야합니다. 그런 다음 ul에 너비와 배경색을 설정할 수 있습니다. http://jsfiddle.net/qT7xs/을 확인하십시오.