Elegant Drop Menu with CSS only
written by aext on September 13, 2009 in CSS & HTML with 69 commentsWhy do we love to use Drop Menu to display our navigation? Because, it saves space for our website. If you’re building a website with many categories, you need to use drop down menu technique for sure. We can find over internet a lot of tutorials show us how to build a Navigation with drop effect by using Javascript. Today, with this tutorial, you will see a simplest way to build a same effect by using CSS only. With some CSS make-up, your menu will be elegant. Not sure which one is easiest, but for sure it’s the simplest menu comes with drop effect: horizontal and vertical navigation.
So, check a demo or download it now.
Updated: It’s already supported IE6.
- Download
- Demo
At first, take a look at what your Navigation should be. That’s your menu before using CSS.
- Parent Item 1
- Parent Item 2
- Child Item 1
- Child Item 2
- Child Item 3
- Parent Item 3
- Child Item 1
- Child Item 2
Step 1: HTML Code
As I said above, this tutorial comes with CSS only, you don’t need to include any javascripts to your <head> tag
  <ul id="navigation">     <li class=""> <a href="#">Parent Item 1</a> </li>     <li class=""> <a href="#">Parent Item 2</a>       <ul>         <li class=""> <a href="#">Child Item 1</a> </li>         <li class=""> <a href="#">Child Item 2</a> </li>         <li class=""> <a href="#">Child Item 3</a> </li>         <li class=""> <a href="#">Child Item 4</a> </li>         <li class=""> <a href="#">Child Item 5</a> </li>       </ul>     </li>     <li class=""> <a href="#">Parent Item 3</a>       <ul>         <li class=""> <a href="#">Child Item 1</a> </li>         <li class=""> <a href="#">Child Item 2</a> </li>       </ul>     </li>     <li class=""> <a href="#">Parent Item 4</a> </li>   </ul>
As code above, you see that all child items will be enclosed inside its Parent Item. We’re using 2 tiers of menu, and the structure of each one completed with Parent and Child is:
    <!-- Begin parent item -->     <li class=""> <a href="#">Parent Item</a>       <!-- Begin Child Items Group-->       <ul>         <!-- Begin Child Item-->         <li class=""> <a href="#">Child Item 1</a> </li>         <li class=""> <a href="#">Child Item 2</a> </li>       </ul>       <!-- End Child Items Group-->     </li>     <!-- End parent item -->
Step 2: CSS Code
Ya! Look at CSS code below. I will organize CSS code into each applied part. CSS code for the hold Navigation and Parent Items is:
/* Navigation */ #navigation { Â Â Â Â list-style: none; Â Â Â Â font-family: "Century Gothic", Verdana, Arial, Sans-Serif; Â Â Â Â margin: 0; Â Â Â Â padding: 0; Â Â Â Â font-size: 1.2em; } /* CSS for each Parent Item */ #navigation li { Â Â Â Â clear: both; Â Â Â Â height: 2em; } #navigation li a { Â Â Â Â float: left; Â Â Â Â display: block; Â Â Â Â padding: 4px; Â Â Â Â text-decoration: none; Â Â Â Â color: #666; Â Â Â Â text-transform: uppercase; Â Â Â Â margin-bottom: 5px; Â Â Â Â margin-right: 10px; } /* Change background color and font color of parent items when mouse hover */ #navigation li:hover a, #navigation li a:hover { Â Â Â Â background: #999; Â Â Â Â color: #fff; }
And below is for Child Items
/* Applie to group of Child Items Each Child Item will be invisible by default */ #navigation ul {display: none;} /* Each Child Item will be visible if mouse hover */ #navigation li:hover ul {display: block;} #navigation ul { Â Â Â Â list-style: none; Â Â Â Â float: left; Â Â Â Â margin: 0; Â Â Â Â padding: 4px 8px; } #navigation ul li { Â Â Â Â float: left; Â Â Â Â clear: none; Â Â Â Â margin: 0; Â Â Â Â padding: 0; Â Â Â Â width: auto; Â Â Â Â height: auto; Â Â Â Â color: #999; }
Finally, we have to reset and re style the link inside each child item because the link already formatted above, you can find it inside css code block of Parent Item.
/* Reset and re style link of each child item */ #navigation li:hover ul li a, #navigation ul li a { Â Â Â Â display: inline; Â Â Â Â padding: 0 6px 0 0; Â Â Â Â float: none; Â Â Â Â text-transform: lowercase; Â Â Â Â color: #999; Â Â Â Â background: none; } #navigation li:hover ul li a:hover, #navigation ul li a:hover { Â Â Â Â background: none; Â Â Â Â color: #000; }
That’s all we need to make the Navigation works.
[smartads]
In this tutorial, I only show you how to make the horizontal drop. You will easy to do the same with drop down vertical menu effect by downloading my code.
Advantage
This technique is easy to customize because the code is so simple. With just a little bit of CSS and HTML code, you can build a navigation with same drop effect as others javascript.
Disadvantage
Good to build a simple navigation with 2 tiers menu, but so complicated with more than 3 tiers menu. When you choose a solution for your drop menu with more than 2 tiers, you should chose another technique. Because, it will be a complex CSS code that hard to control and customize.
And? Not Support IE6 (IE6 again :))). But work perfect with IE7+
Update
Some guys complained about not supporting IE6. Actually, It’s easy to make it support in IE6. In this tutorial, I would like to recommend a small script Whatever:hover and one post I published long time ago Don’t kick your visitors’s IE 6 and below out of your css layout. I really don’t get what web designers want. When I published a post with saving IE6 in design, they said IE6 must die, let’s forget it. In contrast, when a post was published that ignore IE6 out of design, they told: “Hey man, IE is important”. Hehehe, Web designers, what do you want?
Ok, I’m not a talkative guy. Let’s make my tut supports IE6.
Go to this link above that I recommend to download script Whatever:hover. Then link whatever:hover to the body element, and you’re all set. Code will like this:
body { ... ... ... behavior: url("csshover3.htc"); }
Of course, you have already upload csshover3.htc into your web server.
Absolutely, IE6 will not display correct your style as other browsers do. Add these code into your HTML file. With these code, your ugly IE6 can be display better.
<!--[if IE 6]> <style type="text/css"> #vertical-navigation li:hover ul li a, #vertical-navigation ul li a { line-%; } #vertical-navigation ul { top: 2.5em; } </style> <![endif]-->
I updated the code and example, you can download it again.
P/S: Hi guys, I really appreciated all of your comments. Thank you!
69 Responses to “Elegant Drop Menu with CSS only”
Pingback: designfloat.com
Pingback: devmarks.com
Pingback: You are now listed on FAQPAL
Pingback: Elegant Drop Menu with CSS only | favSHARE.net
Actually I’ve tested it in IE7 and the dropdowns are shifted to the right. You might wanna double-check the demo
Otherwise, thanks for the tut
Oh god, I have just take a look in IE 7. My bootcamp got wrong for days. I will update it later. Thanks for notifying!
Hey no problem
Leave a reply here so I see when you update it. Thanks!
I updated it. That caused by last time when I edit CSS code for 2 navigation in example file, I get messed up and put the wrong position attribute for the second one. Thanks again!
Pingback: Tweets that mention Elegant Drop Menu with CSS only | AEXT.NET -- Topsy.com
Pingback: Elegant Drop Menu with CSS only | AEXT.NET
This is nice and simple, but as long as 14% of my users are IE6 users, we still need support for IE6. Last time I checked, IE7 is the most used of the IE browsers.
Pingback: tripwire magazine | tripwire magazine
Pingback: Elegant Drop Menu With CSS Only | Design Newz
Doesn’t work in IE6 = it’s useless!
There are more elegant solutions for doing this.
It’s already supported IE6. Hope see you around! Thanks!
Pingback: 45 Very Useful Articles for Designers and Developers | huibit05.com
Nice tutorial once again. These is one of my favorite website right now. You really rock! Step by step coding that will help a lot.