下拉菜單懸停不涵蓋整個文本

Question

Screenshot1：

截圖2：

如果你看一下screenshot1，你可以看到當你懸停在網頁設計上並不能完全改變背景顏色。然而，萬一做了你在截圖2 這裏將鼠標懸停在文本 '搜索引擎' 是標記： HTML：

<div id="nav"> 
    <ul> 
     <li><a href="#" >My Health</a></li>   
     <li><a href="#" >Fitness</a></li> 
     <li><a href="#" >Diet &amp; Nutrition</a> 
      <ul> 
       <li><a href="#">Webdesign</a></li> 
       <li><a href="#">Development</a></li> 
       <li><a href="#">Illustration</a></li> 
       <li><a href="#">Search engine</a></li> 
       <li><a href="#">WordPress</a></li> 
      </ul>   
     </li> 
     <li><a href="#">Stress Management</a></li>       
    </ul> 
</div> 

CSS：

#nav { 
    width: 100%; 
    height: 36px; 
    background: url('../images/nav-bg.png') repeat; 
    margin-bottom: 10px;  
    } 
    #nav ul li a{ 
     display: block; 
     float: left; 
     font: bold 15px Arial, Helvetica, sans-serif; 
     color: #FFFFFF; 
     padding: 9px 14px; 
     } 
     #nav ul li a:hover{ 
      color: #355da5; 
      background: #fff; 
      border: medium black; 
      } 
      #nav ul li ul{ 
       display: none; 
       position: absolute; 
       top: 130px; 
       margin: 8px 0px 0px 180px; 
       background: url('../images/nav-bg.png') repeat; 
       }        
       #nav ul li ul li a{ 
        text-align: center;     
        font-size: 12px; 
        } 
       #nav ul li:hover ul, li.over ul{ 
        display: block;     
        } 

有誰知道我能解決這個問題嗎？ 謝謝。

Answer 1

您的嵌套<a>標籤由css選擇器#nav ul li a匹配，因此向左浮動。

嘗試添加float:none;內#nav ul li ul li a

Answer 2

試着在#nav ul li a上設置width: 100%。