Alright, time to try and do my own version of a pure CSS dropdown menu tutorial. Despite the very many tutorials out there, few actually explain the entire code, so why not, I’ll give it a try!
Let’s start by creating a regular html nested unordered list as shown below:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul id="dropdown"> <li><a href="">menu</a> <ul> <li><a href="">item 1</a></li> <li><a href="">item 22</a></li> <li><a href="">item 333</a></li> <li><a href="">item 4444</a></li> <li><a href="">item 55555</a></li> </ul> </li> </ul> |
Assuming you already know how to create HTML unordered lists, in the above example, we have a nested unordered list with links, and we’ll use the nested list (the second UL element) as the actual dropdown.
Before we make it drop on mouse hover, let’s give it a basic look & feel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
ul#dropdown, ul#dropdown ul { margin: 0; /* resets the entire list's margin to 0 */ padding: 0; /* resets the entire list's padding to 0 */ } ul#dropdown { border: 1px solid #d7d7d7; /* sets a border around the unordered list */ width: 100px; /* gives it a width of 100px */ } ul#dropdown li{ background-color: #e7e7e7; /* sets the list's default background color */ list-style-type: none; /* removes the list's bullets */ padding-bottom: 3px; /* expands all lists bottom area (padding) with 3 pixels */ } ul#dropdown li:hover { background-color: #e1e1e1; /* sets the background color on hover */ } ul#dropdown li a { color: #444; /* sets all links color */ text-decoration: none; /* removes the link's default decoration (underline) */ padding-left: 8px; /* adds padding to the left at all links */ padding-bottom: 5px; /* adds padding to the bottom at all links */ } |
As shown above, with the help of CSS, we’ve formatted and styled our unordered list along with its links to give us a better feeling on what we’re trying to achieve.
Right now, we have the list dropped down, just like it would look when a user would hover it, all that’s left is to hide the nested list and display it on hover, the CSS magic that is!
1 2 3 4 5 6 7 8 9 |
ul#dropdown li ul { display: none; /* hides the nested list by default */ margin: 3px 0 -3px 0; /* repositions the nested list */ } ul#dropdown li:hover ul{ display: block; /* displays the nested list when the list is hovered */ } |
What we’ve done here is to select the nested list with CSS using “ul#dropdown li ul” and hide it applying “display: none”, so it wouldn’t show once the page has loaded, we then, applied a :hover event to display it whenever the mouse goes over it. We did that by selecting “ul#dropdown li:hover ul”, which basically means: once the list is hovered, select the ascending ul element and apply my settings, which in our case is: display: block.
Here’s the finished code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> ul#dropdown, ul#dropdown ul { margin: 0; /* resets the entire list's margin to 0 */ padding: 0; /* resets the entire list's padding to 0 */ } ul#dropdown { border: 1px solid #d7d7d7; /* sets a border around the unordered list */ width: 100px; /* gives it a width of 100px */ } ul#dropdown li{ background-color: #e7e7e7; /* sets the list's default background color */ list-style-type: none; /* removes the list's bullets */ padding-bottom: 3px; /* expands all lists bottom area (padding) with 3 pixels */ } ul#dropdown li:hover { background-color: #e1e1e1; /* sets the background color on hover */ } ul#dropdown li a { color: #444; /* sets all links color */ text-decoration: none; /* removes the link's default decoration (underline) */ padding-left: 8px; /* adds padding to the left at all links */ padding-bottom: 5px; /* adds padding to the bottom at all links */ } ul#dropdown li ul { display: none; /* hides the nested list by default */ margin: 3px 0 -3px 0; /* repositions the nested list */ } ul#dropdown li:hover ul{ display: block; /* displays the nested list when the list is hovered */ } </style> </head> <body> <ul id="dropdown"> <li><a href="">menu</a> <ul> <li><a href="">item 1</a></li> <li><a href="">item 22</a></li> <li><a href="">item 333</a></li> <li><a href="">item 4444</a></li> <li><a href="">item 55555</a></li> </ul> </li> </ul> </body> </html> |
Obviously, the design of this menu is pretty raw, applying design changes from this point on is quite simple. I do hope I’ve been sufficiently explanatory throughout this tutorial.
Things to know:
- To make this dropdown a multi-level dropdown menu, it requires a few minor changes, if you can’t figure it out, go ahead and post in the comments below about it and I’ll gladly make another tutorial with it;
- Some older browsers including IE6 do not understand the :hover pseudo-class, and sadly, they will not work. There’s a simple way around this issue using javascript or jQuery.
Enjoy!
ha, I will test my thought, your post bring me some good ideas, it’s truly awesome, thanks.
– Joe
I’m glad, post back the end-result eventually
LOVE your blog. Keep up the good work .
Regards
Al Khafji
Nice post.
Especially the people related to Web development.
I am desktop application programmer.These things are quite different for me but they are needed.