Incredible Drop Down Menu Solution With CSS Only
Spread it!
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.
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!
69 User Comments
Trackbacks/Pingbacks
-
-
06. Dec, 2009
[...] This post was mentioned on Twitter by Elena and Lam Nguyen, Web Design News. Web Design News said: Incredible Drop Down Menu Solution With CSS Only http://bit.ly/7lM94F [...]
-
-
06. Dec, 2009
Social comments and analytics for this post…
This post was mentioned on Twitter by allwebdesign: Incredible Drop Down Menu Solution With CSS Only http://bit.ly/7lM94F...
-
-
06. Dec, 2009
[...] This post was Twitted by BillBolmeier [...]
-
-
07. Dec, 2009
[...] Un menu drop-down css détonant [...]
-
-
07. Dec, 2009
[...] This post was Twitted by julienguigner [...]
-
-
07. Dec, 2009
[...] This post was Twitted by yamasas [...]
-
-
07. Dec, 2009
[...] In: Design inspiration 7 Dec 2009 Go to Source [...]
-
-
07. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only | AEXT.NETaext.net [...]
-
-
07. Dec, 2009
[...] This post was Twitted by nightmaaan [...]
-
-
07. Dec, 2009
[...] more: Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 6 December 2009 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next [...]
-
-
07. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only | AEXT.NET [...]
-
-
07. Dec, 2009
[...] down menu, you can try to look into this one, because it only uses CSS for the solution. Check out the instructions and the demo of the drop down. 08 Dec 2009 | tutorial | Comment (0) | Vertical2262 = false; [...]
-
-
07. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only [...]
-
-
07. Dec, 2009
[...] This post was Twitted by HaidaPrincess [...]
-
-
07. Dec, 2009
Incredible Drop Down Menu Solution With CSS Only…
This drop down menu solution uses CSS only, but it has a smooth drop effect and the css sprites that changes the toggle icon jQuery-likely.
…
-
-
07. Dec, 2009
[...] This post was Twitted by onextrapixel [...]
-
-
07. Dec, 2009
[...] This post was Twitted by deanperry [...]
-
-
07. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only | AEXT.NET [...]
-
-
07. Dec, 2009
[...] http://aext.net/2009/12/incredible-drop-down-menu-solution-with-css-only/ [...]
-
-
08. Dec, 2009
[...] This post was Twitted by itdiligent [...]
-
-
14. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only (aext.net). Existen un montón de menús desplegables usando Javascript y CSS que tenemos disponible en Internet, pero la mayoría de ellos son o demasiado básico (con CSS), o son muy complicados (con Javascript). Aquí publican una solución de menú horizontal desplegable usando CSS, que tiene un efecto de caída suave Esta es la solución más completa del menú usando CSS que viene junto con efectos impresionantes. [...]
-
-
15. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only – AEXT.NET [...]
-
-
15. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only – AEXT.NET [...]
-
-
15. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only – AEXT.NET [...]
-
-
17. Dec, 2009
[...] Incredible Drop Down Menu Solution With CSS Only – AEXT.NET [...]
-
-
20. Dec, 2009
[...] CSS (vagabundia). Este es un modelo de menú desplegable que sólo requiere CSS y fue publicado por aex.net. Desde ese lugar podemos descargar los archivos necesarios para reproducir el demo online. Con muy [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
great tutorial, Thank you very much.
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).
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!
demo not working for me in IE7 on WXP
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.
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
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
Thanks Lam!
Your Tutorial rocks 
bookmarked for future reference. 
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.
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
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.
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
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.