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.
Great tutorial. Thanks! Will have a play with it on the Notepad them I implemented.
nice tuts. btw why not using css3 gradient for background
Flawless. Great work Nick, this css menu is very well executed. Kudos
A good example of such a menu is at http://www.grc.com/menu2/invitro.htm . It will require more effort to get it looking as nice, but it is compatible with just about all browsers, including IE6.
nice tutorial
Erm, it doesn’t work on my IE3 (hehe…)
Yes really nice tutorial !
Wow, I loved the “1-piece-o-image” trick for the gradients, I would never think of that! Thanks!
very nice indeed, thanks for the tut.
Great Tutorial thank you so much. I will be happy when CSS3 is more accessible through all the browsers.
Great tutorial! You make it clear and quite easy to follow and understand.
Excellent input. I’m going to try it later on today.
Very goos stuff. Clean, simple and effective. Great stuff. Thas’s we love CSS
Looks nice, Nick! (Bookmarked for later reference)
Hopefully IE9 will support the border-radius property (though I have no problem with IE users seeing boxy navigation … you pick IE for your browser, you suffer!)
Very nice! And the nicest part is that it actually looks good also in non-CSS3 browsers (at least in IE8).
A great example of using CSS3 while still giving non-supported browsers a decent alternative. I don’t think anyone visiting via IE8 would feel that something was out of place / did not work properly.
Awesome tutorial! Thank you for this, I will try this code out very soon!
Fyi on an unrelated note, a script on this page seems to be causing an error in ie6, 7 and 8. ie6 & 7 can’t open the page, while 8 provides this dom warning: “Unable to modify the parent container element before the child element is closed”
The menu demo works fine though.
This is a really good tutorial and a beautiful menu, thanks a lot! Very smart usage of the gradient!
Very nice work.
Really nice, however can I just ask, is the first-child / last-child and the “>” supported in all browsers because I have been containing my drop down ul’s within the li of the root list and using li:hover ul{display: block} etc. which gives slightly messier markup. If these are supported widely i’ll be changing my ways in the future
Ha sorry i just looked at the source and the markup is the same as i have been doing it, just a differrent method of selection. I do love the recyclable gradient though, saves making lots of 1px images for a simple colour change, good for colour changing for accessibility style sheets!