Dropdown menus can be a great thing to have on your site. They are compact; yet they contain everything that a regular menu would have. A lot of times, these are created using javascript. Also, using javascript can cause some validation errors if it is not done correctly. My fix to these problems is to achieve the exact same effect using pure CSS.

The first thing you need to do is create your stylesheet. If you do not have basic css skills, I recommend reading about it on www.w3schools.com. Alright, so what I am going to do is start my stylesheet and style a div with the id of “navmenu”. You can style this however you want or even rename it. Just be sure to change the name throughout. After creating “navmenu”, I am also going to style a div with the id “innerLinks” that will go inside of the “navmenu” div. This div will hold the links that will drop down in our menu. You can style this however you want. Just be sure that the position is set to absolute, the top attribute is set to the height of “navmenu”, and that display is set to none. You need to set its the position from the top equal to the height of “navmenu” so that when you scroll over the menu the links don’t appear on top of “navmenu”. If this does not make sense to you, I would read up on css positioning. Here is the code I used:

<style type=”text/css”>
#navmenu
{
background-color:#999;
height:1.5em;
width:15em;
}
#innerLinks
{
background-color:#dfdfdf;
width:15em;
position:absolute;
top:1.5em;
display:none;
}
</style>

At this point you are most likely still wondering how we are going to make a dropdown menu from this. It is actually quite simple. Right now if you saved this file and added the divs to the bottom of the file the innerLinks div would not show up. This is because display is set to none. To change what it is set to using css you can use :hover. For all those who don’t know what :hover is, it controls what happens to a specific div or element when the user scrolls over it. This is perfect for our dropdown menu! Since we are putting the div “innerLinks” inside of “navMenu” our code will look like this:

#navmenu:hover #innerLinks
{
display:block;
}

So altogether our stylesheet looks like this:

<style type=”text/css”>
#navmenu
{
background-color:#999;
height:1.5em;
width:15em;
}
#innerLinks
{
background-color:#dfdfdf;
width:15em;
position:absolute;
top:1.5em;
display:none;
}
#navmenu:hover #innerLinks
{
display:block;}
</style>

Now the only thing left to do is add our divs to the page. We are almost done! Here is the setup for our divs:

<div id=”navmenu”>
insert title of dropdown menu here
<div id=”innerLinks”>
Put links in here
</div>
</div>

I hope this helped and you found this interesting. Please let me know what you thought of this tutorial and others on my site =D.