Clean, professional CSS navigation menu - Part 1/2.
This tutorial will show you how to create a CSS navigation menu with a semi-professional look.
We have tested the menu on the following web browsers:
- Firefox 3.6.8.
- Internet explorer 7 onwards.
- Google Chrome 5 onwards.
- Opera 9 onwards.
The menu works fine on all of the above, I do intend to start testing my work on a wider range of browsers. Just need to get them installed first!
Unfortunately the menu will not work in IE6.
Take a look below to see the end product:
Step 1 - Creating the images
| Left | Right |
|---|---|
 |
 |
| Hover Left | Hover |
|---|---|
 |
 |
| Main background |
|---|
 |
Simply click any of the above images to download the ZIP file. Or if you prefer, you can create your own.
Step 2 - The HTML
Lets get started with the code. We will use HTML to create a simple unordered list.
The list will need to be nested within a couple of Div's, these Div's will be used to style the list.
Below is the HTML list:
<div id="navWrapper">
<div id="navMain">
<ul>
<li class="firstItem"><a href="#"> Home</a></li>
<li><span> <a href="#"> About </a></span></li>
<li><span> <a href="#"> Services</a></span></li>
<li><span><a href="#"> Products</a></span></li>
<li> <span><a href="#"> News</a></span></li>
</ul>
</div>
</div>
As you can see we have an unordered list nested within 2 Div's. The first list item has been assigned a class & each of the other items has been nested within a span element.
The first list item can now be identified individually using CSS, this is absolutely necessary. The reason behind this is quite obvious, if you look at the menu the first list item has rounded corners.
This means we will need to use a slightly different technique to achieve the hover effect.
Popular pages