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.
What Script Code for Blog?
what is the size of this script ?
This is a great use of CSS3. The tutorial is easy to follow.
Doesnt run in my code the dropdown, whats happening?
thanks in advance
css3 is more and more useful . hope ie series can support it like ff and chrome do one day.
Thank you.
Beautiful and elegant script. The only two thing I don’t like about it is that it uses some absolute positioning which makes this script unusable for fluid content and resizable designs
Thanks for the great script!
ghghghghghgh
thank you its very beautiful
how can i chane it to rtl direction for persian language?
hi thank very well, but how change menu to show sub menu right to left for arabic language
just do this….
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}
Thanx a lot buddy, U saved my life.
Great going!!!
Is it possible to add icons/graphics to an item? For example, it would be nice to have an arrow showing that a dropdown has more items to it (otherwise you may not know to look there).
Thanks in advance, and keep up the great work!
When we click on the (as a example) ” About”. Is it appear like ” Home” (active) with styles?
Hi. Thank you for the dropdown script :) i have little problem.. When i use Google Chrome browser dropdown menu goes behind the flashobject and does not appear
I’m not sure if there was a method to your madness, but I was playing around with your main scrip (the one with the gradient image) and was able to make this menu look good in IE also by doing the following:
If you add “border-radius: 1.6em;” to the “#nav a” definition and I also changed the rounded corners for the first and last link to include the standard border-xx-xx-radius tag:
/* rounded corners of first and last link */
#nav ul li:first-child > a {
border-top-left-radius: 9px;
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
border-top-right-radius: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
border-bottom-left-radius: 9px;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-right-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
That made IE look like the current FF version with rounded corners for the main menu and the rounded corners on the highlights of the fly-outs.
I’ll try the second demo type next :)
Comments?
A few more tweaks to make it exact:
Added ” box-shadow: 0 1px 3px rgba(0,0,0, .4);” to the main “#nav” definition
Added “box-shadow: none;” to the “#nav ul li:hover a, #nav li:hover li a” definition
Added “border-radius: 0;” to the “#nav ul a:hover” definition
Sorry for the double post…
Next time I’ll read all of the posts before making suggestions… I found the same exact ones on earlier posts… carry on!
not working in IE6 not so good………..
it also did not work on my site
it did work with my site ……….
it did not work on ie6 too
great menu and but it does not work with older browsers