Visually appealing CSS drop-down menu - Part 1/2
Note: The techniques used in this tutorial are slightly outdated. Please check out my latest CSS3 vertical dropdown menu tutorial for a more current method
The following tutorial will show you how to create a vertical drop-down menu using HTML & CSS.
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 on all of the above. The only browser which does not support the menu so far is IE6...surprise surprise.
Take a look below to see the end product:
Step 1 - The images
Using photoshop we created the following images. As we require an inner glow & stroke effect we will need two images for each button.
For the background we will use a simple gradient image repeated on the x axis.
| Left | Right |
|---|---|
 |
 |
| Hover Left | Hover Right |
|---|---|
 |
 |
| BG |
|---|
 |
Simply click any of the above images to download them. Or if you prefer, you can create your own.
Step 2 - The HTML
To lay the structure of the menu we can use a simple unordered list placed within a DIV.
In order to achieve the drop-down menu effect we nest another unordered list within the required list item.
Below is the HTML list:
<div id="navContainer">
<ul>
<li> <span><a href="#"> Home</a></span></li>
<li>
<span><a href="#"> About </a></span>
<ul>
<li> <a href="#"> Our business</a></li>
<li> <a href="#"> Our History </a></li>
</ul>
</li>
<li>
<span><a href="#"> Services</a></span>
<ul>
<li> <a href="#"> Web Design</a></li>
<li> <a href="#"> Web templates </a></li>
<li> <a href="#"> Tutorials </a></li>
</ul>
</li>
<li><span><a href="#"> Contact</a></span></li>
<li> <span><a href="#"> News</a></span></li>
</ul>
</div>
As you can see above the code is pretty straight forward and we have nothing unusual in there.
A simple unordered list containing further unordered lists.
If you are unfamiliar with the <span> tag, don't worry. The tag itself actually does nothing! It is simply used as an identifier to which you can apply CSS.
Popular pages