Navigation Bar's Clickable Area, Bigger and Wider

If you have noticed that my navigation bar is changed and a little bit wider and bigger, i made the clickable area a little bit bigger because i like the entire navigation space clickable and not just the text of the link.

I learned that this is actually simple to achieve. With the use of simple unstyled navigation and CSS you will have a that good looking navigation bar. Here's how to do it:

Where to Start?
Let's start with simple navigation menu

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Next...lets add the CSS (This is Horizontal) to add style and make it look good.

If you add this CSS the text remains the only clickable area therefore we will just add the display property to the <li> to command the html of how they should behave or displayed in your site.

This are the code we need to add to complete the process.
display: block; --- this is to fill the entire area
padding: 10px 20px; --- This is to determine the size of the clickable area.

We also need to add html <div> tag in our navigation menu to format
just one section and not cover all links.

Add this to your navigation menu
<div id="navlink"> and close </div> below the menu: Here's what it look like now!

<div id="navlink">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Now here's the final CSS Code:

#navlink ul {
list-style-type: none;
overflow: auto;
padding: 0;
margin: 0;
}
#navlink ul li {
float: left;
border: 1px solid #333;
border-bottom: none;
margin: 0 5px;
}
#navlink ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
* html ul li a { /* this is to fix IE bug */
width: 1%;
}

#navlink ul li a:hover {
text-decoration: underline;
background: #000;
}

Then save.

I hope you find this easy to follow and learn something new.

Please let me know if you done it!