How do I make the whole area of a list item in my navigation bar, clickable as a link?

Question

I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?

#nav {    background-color: #181818;    margin: 0px;    overflow: hidden;  }    #nav img {    float: left;    padding: 5px 10px;    margin-top: auto;    margin-bottom: auto;    vertical-align: bottom;  }    #nav ul {    list-style-type: none;    margin: 0px;    background-color: #181818;    float: left;  }    #nav li {    display: block;    float: left;    padding: 25px 10px;  }    #nav li:hover {    background-color: #785442;  }    #nav a {    color: white;    font-family: Helvetica, Arial, sans-serif;    text-decoration: none;  }

<div id="nav">    <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />    <ul>      <li><a href="#">One1</a></li>      <li><a href="#">Two</a></li>      <li><a href="#">Three</a></li>      <li><a href="#">Four</a></li>    </ul>  </div>  <div>    <h2>Heading</h2>  </div>

Answer 1

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.

Answer 2

Define your anchor tag css property as:

{display:block} 

Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.