While I was coding the Notepad theme, I've learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I've created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
Preview
The image below shows how the menu will look if CSS3 is not supported.
One Gradient Image is Used
A white-transparent image is used to achieve the gradient effect. Because the new CSS3 gradient feature is not supported by all browsers yet, it is safer to use a gradient background image.
The instensitiy of the gradient can be changed by shifting the background image up or down. Also, the gradient color can be easily adjusted by changing the background color.
CSS Code
I'm not going to explain the CSS line by line. The images below explain the key points on how this dropdown is coded.
Update Apr 13 2010: Pure CSS Dropdown (No Image Used)
The following demo used CSS gradient and IE gradient filter instead of the gradient image. It works for Webkit browsers, Firefox 3.6+, and IE.
Thanks for this tut, I was building my own, slightly more complex menu and ran into problems and after reading your blog I saw my error, thanks again.
Just a quick comment to those who may be having problems.
1/ it DOES work in all modern browsers in its raw form I tested it.
2/ it DOES work in IE, even in IE 6, 7 and 8 to a degree, but you have to remember that IE does NOT support some features , such as round corners, so you either have to know how to code, use conditionals, settle for what IE can do or get a decent browser.
3/ some features use CSS3, cutting edge which is beyond most IE, so again, accept the limitations or upgrade your browers, if you are a coder you know that and how to get around it.
4/ I suspect some people are trying to copy, cut and paste, which is fine if you know something about coding, but if you are a novice you may run into trouble as I don’t feel this is a “hold my hand” tutorial. So maybe be prepared to learn a it about HTML and CSS [it isn't too difficult] or skip this a look for something that lays out everything so you can just copy and paste.
I have a working example at http://www.wpbeijing.com which you are more than welcome to work from but it isn’t a tut, there is no step by step although everything you need to know is there if you know where and how to look for it.
It’s also quite a bit different in style and design to the model here, but at the end of the day, all navs work on a similar basis so you can probably build your own.
Again, to the developer, thanks again, much appreciated.
This Code doesnt work!
The menu items arent displayed horizontally inline, the Text itself looks nasty, and the child menus are displayed leftmost of the screen, not below the option youre hovering over!
i dont know what script you used for that demo link, but its definitely not this one!
I believe it does Chris, as I said in my comment last week, I tested the original script from this site and it ran fine on F/Fox, Chrome, Safari and IE6, alth0ugh of course the SFX did not, as the designer states, render in IE. I build for IE6 as if it runs in that it doesn’t take much more to get in the later sisters.
Is it possible you may have cut or missed something from the original code?
It does work but not with the style items shown in the original article. One needs to sneak to the style.css file to get latest – it has some major differences. I had same ‘results’ as descripbed before doing this. The gradient.png file also needs to be grabbed off the web site. Then you will need to tweak the href (and urls obviously).
I can’t beleive how easy things become with a bit of CSS magic.
Thanks for the great “tutorial”. Yes, minimal documentation makes it a little harder than cut and past.
Thanks for the tutorial! I found it very useful.
Thanks for your code. It is working but little problems I can solve those problems. Once again for your valuable tutorial about css menus.
hey Nick,
thanks for the tut..great. I worked a version up 2 weeks ago and was just about to make live.. then FireFox updated itself to version 13… and now won’t display the css3 properties of border-radius on the parent navigation list items. works in Chrome, IE.
is anybody has the same thing happening with FireFox 13??
Copied and modified some of the “No Image” CSS and got it to work fine in Chrome, but not IE. The dropdowns do not appear and the first level rollovers just show background color and not text. So I pasted the example page’s CSS verbatim – because that works in IE (I’m using IE8). That didn’t work. Then I tried adding a doctype to my page because it doesn’t have one and it worked but really messed up my page layout. Wondering if someone could take a look and see if it’s something simple I’m just overlooking. Do I need to add some “if then” statements in the CSS for each browser type? Any help would be appreciated. Here’s the URL http://www.geneva304.org/newmenu1.asp
Thanks.
In regards to Firefox 13, I’ve found that you need to use:
border-radius:XXpx (replace XX with size)
in your CSS to get the radius back.
Otherwise, works great!
This is awesome. What a clean implementation. Drop down menus with zero client side script. Wow! Sorry, can’t hold my enthusiasm. This was the first time I got to know the power of CSS3.
yaar download krne k liye to do…………………kewal demo de rhe ho
@Amar….. view the source of the demo page and you’ll get the code…
I don’t think you’r much of a nerd, so quit developing and become a motormechanic instead
Hello!
Nice job!
but in Firefox 13.0.1 something goes wrong with border-radius…
Hi
I love this drop down menu so much better than another one I found on google
Only small problem is in firefox the buttons are not round on the main nav part, when the menu drops down its rounded but the main part isnt when hovered and not hovered over, and is the same in opera, works perfect in chrome
Any ideas anyone, please
Other than than, I love it, looks great
I will try on my blog.
Thanks for tips.
Blue color perfect.Thanks for sharing.
thanks it help those who wants to learn and not getting any guidance
I can’t get the menu to drop down or have round edges in ie9.
The demo works fine but when I put it on my site it doesn’t work!
Can anyone help?!!
I’m beginner of web dev.
I have a problem with my css code.
I want to put my dropdown menu after header,
but my submenu can’t display when my cursor directed here.
cool dropdown menu, I like it…
thanks…
Filitre Yapımı: http://play.kendincos.com/163368/Whldhtxptjn-filitre-yapimi.html
Hi!
I download the demo, looks nice. good work!
I noticed when I minimize the window (smaller) the menu buttons go down, top of each other. how can I fix it?
This worked well thanks!