HTML + CSS menu issue

I am new to web design and I have created simple menu using HTML + CSS and you can see coding below. When I test this in web browser, there is a unexpected margin / empty space on left (green clour circle in screenshot) when I hovering over on the first list item (menu item). I would appreciate if someone can describe the reason and tell me how to get rid of this issue. Thanks in advance.

Please click this link to see the screenshot 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);
}