CODEWITHSUNDEEP
htmlcssmenu
user3868890
user3868890

Reputation: 25

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);
}

Upvotes: 0

Views: 105

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

The ul has a default padding.. remove it with 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-->

Upvotes: 4

Related Questions