Weeb tutorials feedback Powered by

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
Navigation menu image Navigation menu image
Hover Left Hover Right
Navigation menu image Navigation menu image
BG
Navigation menu image

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.

next

This is the old version of our site. To visit the new version click the following link: New site