Membuat CSS drop-down menu menarik

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 usingHTML & 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:

• Home
• About
• Services
• Contact
• News

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.

We now have the necessary HTML structure for our drop-down menu. Lets move on to the CSS.

Step 3 - Using CSS to style the drop-down menu

Styling the menu is going to require more thought than the HTML did but it is still relatively straight forward.

We basically need to set our background image, style the list(take away list style, set width etc.), apply the left image to the span element, apply the right image to the anchor & then move the sub-menu into place.

To place the sub-menu items we will use absolute positioning, take a look at the code below to see how this works:

Below is the CSS code:

#navContainer {
margin:0;
padding:0;
background:url(images/blueVertNav/bg1.png) repeat-x;
border: 1px solid #7398ba;
text-align:center;
width:220px;
}

The 'navContainer' will hold the menu. We have declared a width of 220px, set a border and applied the background image. We have also centered the text.

#navContainer ul{
margin:0;
padding:0;
list-style:none;
}

Nothing unusual here, set the padding and margin to 0 and get rid of the bullet points.

#navContainer ul li {
position:relative;
}

This piece of code is important. By setting the list item to relative we are telling any child item (which is positioned absolutely) that it will be positioned relative to the position of its parent list item.

#navContainer ul li span{
display:block;
background:url(images/blueVertNav/buttonLeft.png) top left no-repeat;

}

Change display to 'block', this tells the element to fill all available space and makes the whole button click-able. Set the 'left' image as the background.

#navContainer ul li a{
text-decoration:none;
color:white;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
display:block;
padding:8px;
background:url(images/blueVertNav/buttonRight.png) top right no-repeat;
}

Get rid of the underline on our text, change the font color to white & change the font family. Change display to block yet again & set the 'right' image as the background. The two background images should now overlap to create a single image.

#navContainer ul li span:hover {
background:url(images/blueVertNav/hoverLeft.png) top left no-repeat;
}

Following the same process as before apply the background image. Only difference here is that we are using the ':hover' pseudo class(and different images of course).

#navContainer ul li a:hover{
background:url(images/blueVertNav/hoverRight.png) top right no-repeat;
}

Same again, but this time use the 'right' image. When hovering your mouse over the menu the background image should now change.

#navContainer ul ul{
position:absolute;
display:none;
}

Within our parent UL, set the position of any child UL to absolute. Set the display property to 'none'. This hides the drop-down menu, which can be brought back into sight when its parent list item is hovered.

#navContainer ul ul li a{
background:#bec8cb;
}

Set a background color for our sub-menu.

#navContainer ul li:hover ul{
width:80%;
position:absolute;
display:block; left:218px;
top:0;
}

This is the important part. When the user hovers their mouse over the list item, the sub-menu section will be moved back into place. We have set a position of 'left:218px', this moves it 218px to the right of its original position. Also, the display property has been set to block. The dropdown list will now be visible while it, or its parent list item is hovered.

Remember, when we give an element a position of 'absolute' it is positioned relative to the first parent that has a position other than static.

That is why we set the position of '#navContainer ul li' to relative.

Job done, enjoy.