How to add a dropdown menu using only css.

Posted on February 16, 2010 by max li bin

lets say u want create menu with

then you want to have a dropdown inside one of the list, in this example i want to have it inside on class dropdown. which means when i mouse over class drop down my menu button come out.

now we need to add a styles to your unorder list and lists.

/* this is to clear your unorder list margin and padding */
ul { margin:0; padding:0; }

/* clear your list styles and give a right margin when float left */
ul li { margin:0 0 0 20px; padding:0; list-style:none; display:block; float:left; }

here is the interesting part. now you have a class call dropdown.
/* give a relative position for your li.dropdown */

ul li.dropdown { position:relative; }

/* hide your dropdown lists */

ul li.dropdown ul { display:none; }

/* show when mouse over class dropdown */

ul li.dropdown:hover ul { display:block; }

enjoy