Sometimes you’re in need of creating some kind of drop-down menu, but you’re left with Javascript or other scripts which aren’t desirable, as they may not work in all browsers, and certainly not when someone is browsing with scripting turned off.
This tutorial shows you how to create a basic drop down menu styled with CSS. No images are used in this tutorial.
Warning: Okay, maybe not a warning, but a serious note you need to take note of (obviously) – I’ve styled the result of this tutorial in a simplistic manner. You will need to tackle the colours and how you want it to look yourself. See an example of this tutorial in action.
The first step is for you to complete yourself: Write out your HTML and don’t forget to call on the CSS file or include it in the document for editing later.
Now let’s start with the skeleton of our menu.
<ul id="navigation"> . . . </ul>
The menu is empty at the moment. We are using an unordered list to deal with this, and we’ll be making it look more like a menu shortly, of course.
In the CSS, we must include the following – you can change background colours and even edit the margins and padding as you wish, depending on where the menu is on your layout. This moves the entire navigation menu, centres it if you need… You don’t need to edit anything if you’re just giving this tutorial a go!
#navigation {
margin: 0;
padding: 0;
}
Now let’s put the main navigation in. I’ve decided that I’m going to have “Home”, “About Me”, and “Artwork” [navigation links] as the examples. Under “About Me” and “Artwork” I have other links [sub-navigation links] which will drop down when I hover over the navigation links. We will worry about these later.
Our main navigation will have a class – I’ve decided to use the name drop for these. Therefore each <li> in the list will use the class drop:
<ul id="navigation"> <li class="drop"><a href="">Home</a></li> <li class="drop"><a href="">About Me</a></li> <li class="drop"><a href="">Artwork</a></li> </ul>
I have left the links blank – you fill these out how you like.
Now we need to deal with the CSS of the navigation links. The following code will style the way the ‘buttons’ look when they are static – not hovered over. The parts in italics are safe to edit.
li.drop {
list-style: none;
list-style-type: none;
display: inline;
float: left;
position:relative;
z-index: 1;
border: 1px solid #aaa;
background-color: #eee;
padding: 10px;
margin: 0 20px 0 0;
}
You will notice that the ‘buttons’ will have changed but the actual text has not. This is where we use li.drop a to style what the actual link text looks like – not the block. You can edit this how you like too.
li.drop a {
text-decoration: none;
color: #333;
font: bold 90% arial;
}
If you want to change the look of these when you hover over the navigation links – such as having a different colour or background, you can style li:hover.drop and li:hover.drop a. I have used the following in my example to change the background colour. It’s quite simple.
li:hover.drop {
background-color: #ddd;
}
Now let’s return to our navigation and insert the sub-navigation links. I have the following sub-navigation links in mind:
- About Me: Biography; Contact Me
- Artwork: Drawings; Paintings; Digital
Now we need to make nested lists with what we already have. A nested list is basically a list in a list.
Our list has “About Me” and “Artwork”.
The “About Me” list has “Biography”, and “Contact Me”.
The “Artwork” list has “Drawings”, “Paintings”, and “Digital”.
You should be able to see that “Biography” and “Contact Me” make a list, and “Drawings”, “Paintings”, and “Digital” make another list, which are inside “About Me” and “Artwork” respectively.
This is how we put it together. The new lists are being given the ID dd (drop down) so that we can style the drop-down menus with CSS later.
<ul id="navigation"> <li class="drop"><a href="">Home</a></li> <li class="drop"><a href="">About Me</a> <ul class="dd"> <li><a href="">Biography</a></li> <li><a href="">Contact Me</a></li> </ul> </li> <li class="drop"><a href="">Artwork</a> <ul class="dd"> <li><a href="">Drawings</a></li> <li><a href="">Paintings</a></li> <li><a href="">Digital</a></li> </ul> </li> </ul>
I’ve left out the links so that you can fill them in yourself. The next part is a bit tricky, so pay attention. Depending on how your list is so far, you may need to edit the following accordingly.
ul.dd {
display: none;
position: absolute;
top: 40px;
left: -1px;
list-style:none;
list-style-type: none;
width: 100px;
padding:0px;
margin:0;
}
li ul.dd {
z-index: 1;
}
It might be a good idea to change the width, padding, and margin, depending on how you want your list. This is up to you to decide. You may want to change the top value, which specifies the distance of the drop-down menu from the top of the navigation. You may need to fiddle with this – I had to.
You should generally leave the z-index alone. It specifies the stack order of an element. So, those with a larger number are above elements with a lower number. This basically keeps the menu on top of everything else, but increase the number if you must.
The next part, I’ll leave you to have a go yourself. It basically involves using CSS to style the drop down menus:
li:hover ul.dd {
display: block;
border:1px solid #aaa;
}
ul.dd li {
background: #fff;
padding: 10px;
font: bold 95% arial;
background-color: #fff;
color:#333;
}
ul.dd li:hover{
background: #F69679;
}
Edit how you like. 
If you found this tutorial useful, please credit me so others can learn the same way. It took me time to write this tutorial and I basically supplied all the code, so I would like credit. Please do not copy this tutorial.