下拉菜单悬停不涵盖整个文本

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%。