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