Curyous Curyous - 1 year ago 83
CSS Question

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

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?


<link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
<link rel="shortcut icon" href="/images/favicon.ico" >

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


#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;

#nav img {
float: left;
padding: 5px 10px;
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;

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download