Incredible Drop Down Menu Solution With CSS Only
There are plenty of drop-down menus using javascript and CSS already available, but most of them are either too basic (with CSS) or too complicated (with Javascript). That’s why I publish this drop down menu solution which is using CSS only, but it has a smooth drop effect and the css sprites that changes the toggle icon jQuery-likely. Honestly, this is the most completed menu solution using CSS which comes along with awesome effects.
If You want to stay updated and get news regularly consider subscribing to AEXT.NET feed and following on Twitter.
This menu solution is compatible with all major web browsers (excepts IE6):
- Firefox: Perfect support.
- Chrome: Perfect support.
- Safari: Yes, it display perfect with rounded corner.
- Opera: Yes, but with no rounded corner.
- IE7+: Off course, but no rounded corner
The problem with IE6 is she cannot handle the hover event in all HTML element excepts the link:hover. If you don’t want to waste time for saving this lady, just forget her. However, there a solution to help this lady to displays the menu correctly: using whatever:hover script. (I’m sorry but I don’t recommend to support IE6)
It also has a transparent effect that displays correctly on all web browsers, take a look:

Now, it’s time for you to check the demo or download it:
Step 1: Prepare the HTML code.
The HTML code is very simple. You just need a list of links. If it has a sub-menu, it should have another list inside. Your HTML code should be like this below: (See the comment to understand clearly how the menu works)
<ul class="menu"> <!-- Begin Simple Item Without Drop --> <li class=""> <a href="#">Interested in Contribution?</a> </li> <!-- End Simple Item Without Drop --> <!-- Begin Item With Drop --> <li class="drop"> <a href="#">Web Design</a> <!-- Begin Toggle Icon --> <span class="toggle"> </span> <!-- End Toggle Icon --> <ul> <li><a href="#">CSS & XHTML</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Dreamweaver</a></li> </ul> </li> <!-- End Item With Drop --> <li class="drop"> <a href="#">Blogging</a> <span class="toggle"> </span> <ul> <li><a href="#">Tricks & Tips</a></li> <li><a href="#">Affiliate</a></li> <li><a href="#">Advert on aext.net</a></li> </ul> </li> </ul>
If you wanted to get opacity to work with IE8, either you’d have to have your users turn on the IE7 compatibility mode, or you’d have to add a meta tag to your web page:
<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7" />
Step 2: Prepare CSS Sprites image for toggle icon.
If you want to use the toggle icon for the menu item when it is active, you should use the CSS Sprites technique to do it. In Photoshop or any image editor, make an image for sprites like this:

You can use the top image for active items, and the bottom for inactive items.
[smartads]
Step 3: Write CSS code.
First, we have to make up the root menu ul element.
ul.menu { list-style-type:none; margin:0; padding:6px 0 0 6px; position:relative; float: right; }
Next, for the list of items, we should write CSS code like this below:
ul.menu li { display:block; height: 30px; float:left; position:relative; margin:0 9px 0 0; padding:0; filter: alpha(opacity=75); /* internet explorer */ -khtml-opacity: 0.75; /* khtml, old safari */ -moz-opacity: 0.75; /* mozilla, netscape */ opacity: 0.75; /* fx, safari, opera */ } ul.menu li.current { background:#000000; -moz-border-radius:4px; -webkit-border-radius:4px; } ul.menu li:hover { background:#000000; -moz-border-radius:4px; -webkit-border-radius:4px; }
Remember we only set background color for the item when it is hover or active, because we don’t need to display the background color when it is inactive.
CSS code below is used for styling the toggle icon:
ul.menu li.drop span.toggle { display:block; float:left; width:21px; height:26px; background:transparent url("images/toggle.png") no-repeat 0 -20px; padding:0; margin:0 7px 0 0; } ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle { background-position:1px 5px; }
When the item was in mouse over, we will make some changes to the current active item, also display the sub-menu list. The sub-menu is a list of items which placed as absolute position, so it has to be set z-index value larger than others. We handle the hover event by using css as below:
ul.menu li.drop:hover, ul.menu li.current:hover { -moz-border-radius:0; -webkit-border-radius:0; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; } ul.menu li.drop:hover ul { display:block; z-index:1; padding-bottom:8px; }
Because IE has problem when displays the opacity effect with css, we need to set the opacity again in the sub-menu and its items. The most important css code to display the sub-menu is:
ul.menu li ul { display:none; position:absolute; width: 100%; top:30px; left:0; list-style-type:none; margin:0; padding:9px 0 0 0; background:#000000; filter: alpha(opacity=75); /* internet explorer */ } ul.menu li ul li { float:none; height: auto; margin:0; padding:0; border:none; filter: alpha(opacity=100); /* internet explorer */ }
These CSS code above is only for most important parts of the menu to see how the menu works in basic and it’s unnecessary to post a whole code here. The completed code is include in download file. Download it and customize some value to fit your needs.
The Bugs:
Because it uses CSS only to render the dropdown menu, it still has some unexpected bugs:
- As I said on top: This menu is not used for IE6 (If you want, please do some IE6 hacks)
- Currently, this menu cannot render a rounded corner in IE, Opera
- When the number of characters of the root item is less than sub-menu items, this menu cannot automatically stretch the width. See the demo, look at the third one
- This menu currently works with one or two tiers only.
Please let me know if you decide to use it, or have any feedback. Thanks!
Pingback: Tweets that mention Incredible Drop Down Menu Solution With CSS Only | AEXT.NET -- Topsy.com
Pingback: uberVU - social comments
great tutorial, Thank you very much.
Pingback: Twitted by BillBolmeier
Good tut. Suckerfish is definitely my preferred method of drop-down menus when I’m worried about compatibility. Plus its so quick to set up
Great tutorials, this tuts already bookmarked on wordtaps
Thanks guys for interesting!
@mupet – Really appreciated that!
Another awesome tutorial. Thanks! This will be very useful to me.
This is really an awesome one, but unfortunately it doesn’t work in IE, even though I hate IE a lot, I would love to have the hack for IE too as a Web Developer.
Thanks a Lot
@AfTriX – Yup, it doesn’t work in IE6 but it works in IE7+ (without rounded corner).
Pingback: 1 menu drop-down css détonant
Pingback: Twitted by julienguigner
Pingback: Twitted by yamasas
Thanks for sharing this Lam, I have bookmarked for later reference.
unfortunately the print preview is a mess… I wanted to check before I print…
please refine that!
Pingback: Incredible Drop Down Menu Solution With CSS Only | AEXT.NET | Squico
Pingback: Incredible Drop Down Menu Solution With CSS Only | AEXT.NET « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
Pingback: Twitted by nightmaaan
demo not working for me in IE7 on WXP
Pingback: Incredible Drop Down Menu Solution With CSS Only | AEXT.NET : Popular Links : eConsultant
Pingback: Incredible Drop Down Menu Solution With CSS Only | AEXT.NET » Web Design
Doesn’t work on real IE7 on windows XP :/
Strange !
It gotta kidding me
because in my bootcamp windows XP, it still work fine. Alright, I will take a look in my Desktop.
Pingback: Drop Down Menu Solution With CSS - Kreativuse - Creative Resources & Inspirations
Pingback: Incredible Drop Down Menu Solution With CSS Only | Design Newz
Pingback: Twitted by HaidaPrincess
Pingback: CSS Brigit | Incredible Drop Down Menu Solution With CSS Only
Dude, this is awesome!
But doesn’t work on IE7. ( i’m using win7 and emulating IE7 with IETester )
Anyway, keep the good work!
Regards.
Hi everyone, the problem with IE7 has been fix. Thanks for the notification. I have to check my bootcamp again because it always display perfectly 😀
Pingback: Twitted by onextrapixel
Pingback: Twitted by deanperry
Great tuts, bookmarked + retweeted for future references
@Connie: Perhaps an alternative stylesheet for printing would be a real good solution…
Currently, I could not provide the stylesheet for printing. Maybe next time for another tutorial 😀
Pingback: Napi okosságok – 2009/12/08 | Yloz féle zacc
Thanks Lam!
Your Tutorial rocks
bookmarked for future reference. 
Pingback: ã€CSS】CSSã®ã¿ã§å®Ÿè£…ã•れãŸãƒ‰ãƒãƒƒãƒ—ダウンメニュー « minimo
No need to use the compatibility meta tag. As of IE8 Microsoft changed all properties that aren’t in the CSS2.1 spec to have the -ms vendor extension. http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
filter is now -ms-filter in IE8.
Oh, I almost forgot it! I got notice that opacity has come back in IE8 but forgot it when typing this tutorial. Thanks Ryan!
I’d hardly call this an ‘Incredible Drop Down Menu Solution’ – this method of HTML/CSS drop downs has been around for years now.
Also, I’d recommend using background transparency (through RGBA or PNG) rather than opacity as Windows Clear Type generates sub-pixel artifacts when using opacity on text.
Also, in order to support more browsers (current and future) you should include the standard border radius style (border-radius) along with the Konqueror proprietary -khtml-border-radius.
Additionally, when specifying a XHTML DOCTYPE, make sure you close your meta and link tags and encode your ampersands.
Finally, you could have tidied the HTML code by using CSS to insert the toggle icons into the top level LI rather than including unnecessary SPAN elements filled with Non-Breaking Spaces.
Pingback: Twitted by itdiligent
Thanks! Perfect and quick solution!
Love this drop down
Wow, nice Menu! I think I will use it for a couple of projects I have in mind.
Sorry to hear that you do not support IE.
It takes only 3 lines of code you know
in css below
ul.menu li.drop:hover ul {
display:block;
z-index:1;
padding-bottom:8px;
}
change to
ul.menu li.drop:hover ul, over {
display:block;
z-index:1;
padding-bottom:8px;
}
then add the following lines to your jquery:
$('ul.menu li.drop').hover(
function() {
$(this).addClass('over');
},
function() {
$(this).removeClass('over');
}
);
Regards
Alwyn
Yup, doing this thing to make it works in IE is easy by using jQuery. However, this topic is talking about CSS only *_+
Anyway, that would be a nice comment! Thanks!
useful menu, thanks for the tut..
This is great. One question though.
By removing the 100% width on “ul.menu li ul li” I can get the transparent container to automatically adjust to the width of the widest option in the subnav ul. But is it possible to keep the subnav ul from getting any narrower than it’s parent li but also allow it to adjust it’s width to fit a subnav option that is wider than it’s parent li without cutting it off?
I have some subnav options which are getting cut off on the right side because they are longer than the main menu item.
I hope all that makes sense.
Lee
Yes, that is a bug that I did mentioned in this tutorial. The only solution is by adding some space to the parent li though.
However, I think there are others solutions would help that I haven’t found out. Any suggestion would be great!
Thanks. It’s probably not that elegant, but at least it’s a minor work around.
I simply added another “ul.menu li ul” but added a custom class to the end “ul.menu li ul.wider”. Then gave that box a specific width and applied the class to the one specific ul.
Lee
Pingback: Enlaces semanales que no he publicado (42) | Cosas sencillas
Pingback: This Weeks Twitter Design News Roundup N.15 : Speckyboy Design Magazine
Pingback: This Weeks Twitter Design News Roundup N.15 · rogdykker
Great drop down, shame about Internet Explorer 6 always messing things up. If it was up to the majority of designers I’m sure we would hang this ‘Lady’ from the highest tree. Unfortunately it’s never nice to get a phone-call from a client moaning that their website is broken on the wife’s old work computer, so I will chose to use the hover script.
Pingback: This Weeks Twitter Design News Roundup N.15 | Programming Blog
shouldn’t use the word ‘incredible’ in the title when it is just a plain old css drop-down. Not even a good functioning one. It does look really nice tho which i think is the point of this article! Kudos
Pingback: This Weeks Twitter Design News Roundup N.15 | EMDMA
Pingback: Enlaces semanales que no he publicado (43) | Cosas sencillas
This is very useful to me. Thanks much. Can i ask you a question? Are you Vietnamese? Your name look like Vietnamese’s.
Dear.
looking really nice, but not working in IE6
Did you try to implement whatever:hover script?
excellent
Thank you!!! Very useful!
Great tutorial. I’ll be using this! =)
Thanks for this!
Is there a simple way to make this fixed (so it stays at the top of the browser even when scrolling)?
I tried changing…
position:relative;
to
position:fixed;
but it all seem to fall to bits from there
Any help would be much appreciated!
Won’t work. It won’t let me hover over a list-item even when there’s text below it.
Please try to implement the menu from the demo page. The CSS should be reset before style the document.
Pingback: 99 техник ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð¼ÐµÐ½ÑŽ Ð´Ð»Ñ Ñайта CSS и jQuery | SHEBEKO.COM
Hello, this is a very cool menu, I’m learning new CSS techniques and I will implement this ASAP, thanks dude.
Pingback: Incredible Drop Down Menu With CSS « Design Define's Blog
What an outstanding job you have done. You’ve dished up many people by creating this publish. Caps away to a person. many thanks to you and looking much more like these articles.
Thanks, it helped me a lot. 😉
This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.
I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind.
Hey, thank you for the great tutorial! I will be using this as part of a new “portfolio” site I am building. Thank you.
A nice tip. I am so happy when found it on Google. Thanks Lam very much!
this is great thanks a lot, looking forward to working on some drop down menus for my site, thanks