HTML + CSS菜單問題

Question

我是新來的網頁設計，我創建了簡單的菜單使用HTML + CSS，你可以看到下面的代碼。當我在網絡瀏覽器中測試這個時，當我將鼠標懸停在第一個列表項目（菜單項）上時，左邊有一個意外的空白/空白區域（屏幕截圖中的綠色輪圈）。 如果有人能描述原因並告訴我如何擺脫這個問題，我將不勝感激。提前致謝。

請點擊此鏈接查看截圖 http://screenshot.net/zvjw4in

HTML：

<div id="nav"> 
    <ul class="menuUl"> 
     <a href="index.html"><li>Home</li></a> 
     <a href="Youtube.html"><li>Youtube</li></a> 
     <a href="facebook.html"><li>facebook</li></a> 
     <a href="map.html"><li>Map</li></a> 
     <a href="contactus.html"><li>Lets Connect</li></a> 
    </ul> 
</div><!--nav--> 

CSS：

#nav { 
    height:50px; 
    width:700px; 
    background-color:rgba(0,0,0,0.5); 
    margin-left:auto; 
    margin-right:auto; 
} 
.menuUl { 
    list-style-type:none; 
} 
.menuUl li { 
    width:132px; 
    height:42px; 
    float:left; 
    text-align:center; 
    font-size:24px; 
    color:rgba(255,255,255,1); 
    padding-top:8px; 
} 
.menuUl li:hover { 
    background-color:rgba(0,51,255,1); 
} 

Answer 1

的ul有一個默認的填充。與padding:0;

刪除

#nav { 
 
     height: 50px; 
 
     width: 700px; 
 
     background-color: rgba(0, 0, 0, 0.5); 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
    } 
 
    .menuUl { 
 
     list-style-type: none; 
 
     padding:0; 
 
    } 
 
    .menuUl li { 
 
     width: 132px; 
 
     height: 42px; 
 
     float: left; 
 
     text-align: center; 
 
     font-size: 24px; 
 
     color: rgba(255, 255, 255, 1); 
 
     padding-top: 8px; 
 
    } 
 
    .menuUl li:hover { 
 
     background-color: rgba(0, 51, 255, 1); 
 
    }

<div id="nav"> 
 
    <ul class="menuUl"> 
 
    <a href="index.html"> 
 
     <li>Home</li> 
 
    </a> 
 
    <a href="Youtube.html"> 
 
     <li>Youtube</li> 
 
    </a> 
 
    <a href="facebook.html"> 
 
     <li>facebook</li> 
 
    </a> 
 
    <a href="map.html"> 
 
     <li>Map</li> 
 
    </a> 
 
    <a href="contactus.html"> 
 
     <li>Lets Connect</li> 
 
    </a> 
 
    </ul> 
 
</div> 
 
<!--nav-->