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.
Nov 20, 2012 @ 7:42 am
This is great!.
I am trying to use this in a vertical menu system, but the sub menu appears behind the top menu links. Can you advise how to change this?
Each top menu is in its own because of my layout restrictions
Thanks in advance.
Nov 23, 2012 @ 2:39 pm
thanks really nice work….
Nov 25, 2012 @ 2:06 pm
like this side
Dec 4, 2012 @ 7:32 pm
Great! Thanks, this is very flexibile and simply menu!
Jan 29, 2013 @ 9:07 am
Hi there a very nice tutorial. Keep it up dude
Feb 2, 2013 @ 3:05 am
if it is free then why you are not provide gradiant.png
May 27, 2013 @ 5:03 pm
Hi, I have tried the code. It works for all the browsers except Internet explorer. But the demo works on IE. Am i doing something wrong?
Jun 1, 2013 @ 3:44 am
hi sir
i really like CSS3 because CSS3 is batter than CSS2
keep it up
thanks for sharing
Feb 1, 2017 @ 2:54 pm
MUY BUENO
Feb 14, 2012 @ 11:52 am
ahh sorry there: http://paste.php.lv/d5efe386cae8ad0c81a2869c583dc486?lang=html4strict
Mar 4, 2012 @ 6:36 pm
Hi … please help ….
1.- I wrote the CSS code in the image beetween code
2.- I pasted the html code from the demo
3.- I created a gradient.png image
4.- Did not work ….. any clue ???
Thdnks for helping me !!
Apr 28, 2012 @ 7:10 am
you can put css like link version. Just save css code like css document and upload him to your site file manager and add this:
and that is. saving more space than put him like html code.
May 8, 2012 @ 6:33 am
you are using a gradient.png image for background?
Write the full path in Css:
background-image:url(images/gradient.png); background-repeat:no;
Jan 29, 2013 @ 9:21 am
IE doesn’t support css3 elements my bro