How to add a dropdown menu using only css.
Feb 16thlets 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
now we need to add a styles to your unorder list and lists.
1 2 3 4 5 | /* 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 */
1 | ul li.dropdown { position:relative; } |
/* hide your dropdown lists */
1 | ul li.dropdown ul { display:none; } |
/* show when mouse over class dropdown */
1 | ul li.dropdown:hover ul { display:block; } |
enjoy
2 Comments
no demo?
Does not work.
Leave Your Comment