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.
Which part of the CSS gives the space between the button and drop down. My menu always disappears everytime I drop to click on a link in the drop down?
ddddd
kkkkk
hhhh
你好啊
in #nav ul
top: 35px;
gives the space.
It did not work!!
aaaa
Hi
Im having the same problem than (Christian Jun 08, 2011 @ 01:30)
The text is smushing together when it is more then one word. how can I fix this problem.
in #nav ul is width set to 185 px, but width of li’s should be auto, accourding to text width.
#nav ul {
width: 185px;
}
HI, are there any ways to use jquery/JS to change to selected tab?
I tried using
$(“#nav li a”).click(function()
{
$(this).parent().addClass(‘current’);
});
but it didn’t work! I got no idea what is going wrong.
Thanks for making this tutorial very detailed. Great!
great artikel….
i have a website look great….
thanks for your artikel
Instead of using display:none to hide the dropdown I prefer doing; left:-9999px; And then to bring it back; left:0; Only works if you use relative and absolute positioning in the right way.
But I believe my method is more accessible since screen readers for example won’t read display none.
What’s your idea about this ?
Olá,
Na hora que adicionei o menu no site, o drop-down ficou abaixo dos outros elementos já existentes e o seu background também ficou apenas no começo da box dele(s). Poderia me ajudar a solucionar?
nice solution with the gradient effect by shifting the background image
thanks
i got a problem when deploying the menu in my website
whet the drop down appear, it was covered by div tag below it
how can i make the drop down appear on top of other component?
*when
problem solved, i used z-index property to make drop down menu on top of div elemnt
hey thanks for amazing navbar but i have only one problem when i put slider under your navbar and take mouse over navbar then its drop-down hidden behind slider and i can nor see drop-down menus .
Fantastic tutorial, very Pro…
Thank you.
Thank u :)
Thanks for tutorials
Is there sample code (.zip or similar)?
I would like to test, but I did not find the source to donwnload. Is there a source ?
Border-radius is not working on IE.. on Win7
What to do..
made after its drop down menu, how to install the blog, please help
its working :)