My navigation list is overlapping padding. How can I prevent this?

Question

I am trying to make a navigation that highlights the area around the link when you hover over it, and allows you to click on the any area of the highlight to follow that link. It seems that my padding is overlapping and you can only click on the padding to the left of the link, whereas the padding on the right becomes the left padding of the link the the right. JSFiddle: http://jsfiddle.net/Hh7XG/1/ HTML ```

```…

Accepted Answer

Since you're using `padding` property on your anchor tags to increase their width, it doesn't need to specify `width: 100%`. Just remove that, and it works:

```
#menubar ul li a {
    text-decoration:none;
    color:#005da4;
    display:block;    /* Since li element is floated itself */
                      /* it doesn't need to use inline-block value for display */

/* width:100%; */ /* <-- remove this declaration */
    padding: 10px 20px;
    text-align:center;
    margin-left:0;
    margin-right:0;
}
```

Edited Fiddle.

My navigation list is overlapping padding. How can I prevent this?

Solution

Problem