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: