下拉菜單的問題

Question

我使用有序列表創建菜單，並且遇到兩個問題，下拉不對齊，懸停效果應用於下拉菜單，我不想要做到這一點

這裏是一個JS小提琴：

http://jsfiddle.net/HFMR5/

這是我的HTML代碼：

<div id="menu"> 
    <ul id="navigation"> 
    <li><a href="index.html">Home</a></li> 
      <li><a href="">Services</a> 
      <ul> 
      <li><a href="">Residential</a></li> 
      <li><a href="">Buisiness</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 

，這是菜單的CSS：

/*Navigation CSS*/ 

       #navigation 
       { 
       width: 100%; 
       float: left; 
       margin: 0 0 3em 0; 
       padding: 0; 
       list-style: none; 
       background-color: #f2f2f2; 
       border-bottom: 1px solid #ccc; 
       border-top: 1px solid #ccc; 
       box-shadow: 0 8px 6px -6px black; 
       } 
       #navigation li 
       { 
       float: left; 
       } 
       #navigation li a 
       { 
       display: block; 
       padding: 8px 15px; 
       text-decoration: none; 
       font-weight: bold; 
       color: #FF6987; 
       border-right: 1px solid #ccc; 
       -webkit-transition: all 0.1s ease-in; 
       -moz-transition: all 0.1s ease-in; 
       -o-transition: all 0.1s ease-in; 
       } 

       #navigation ul 
       { 
       font-family: Arial, Verdana; 
       font-size: 14px; 
       margin: 0; 
       padding: 0; 
       list-style: none; 
       } 

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

       #navigation li ul { display: none; } 

       #navigation li:hover ul { 
       display: block; 
       position: absolute; 
       } 

       #navigation li:hover li { 
       float: none; 
       font-size: 11px; 
       } 

       #navigation li:hover a { background: #f2f2f2; } 

       #navigation li a:hover 
       { 
       color: #FF6987; 
       background-color: #f2f2f2; 
       box-shadow: inset 0 8px 6px -6px black; 
       } 

Answer 1

爲了寬度是相同的，你需要實際設置子菜單（不一定是靜態）的寬度，但如果你讓它成爲然後它只是擴展到contnent的大小這顯然是不希望的，CSS的更改後的樣子：

#navigation li{ 
    float: left; 
    position:relative; 
} 

#navigation li:hover ul { 
    display: block; 
    position: absolute; 
    width: 100%; 
} 

的position: relative有子菜單知道確定100％的寬度，而不是body標籤什麼時候使用該元素。

至於在子菜單項上顯示的懸停效果，您需要在選擇器中進行更具體的操作。您使用的空間表示您將選擇#navigation這個li元素的後代。包括子菜單。如果您使用類似>這樣的選擇器來表示直接的孩子，那麼只有在定位頂級菜單項時，您才能夠體現出更具針對性。 CSS看起來像：

#navigation > li > a:hover{ 
    color: #FF6987; 
    background-color: #f2f2f2; 
    box-shadow: inset 0 8px 6px -6px black; 
} 

一個很好的參考的CSS選擇：http://www.w3schools.com/cssref/css_selectors.asp