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.
Adeel
Great tutorial. Thanks! Will have a play with it on the Notepad them I implemented.
choen
nice tuts. btw why not using css3 gradient for background
Andy Gongea
Flawless. Great work Nick, this css menu is very well executed. Kudos
Alistair MacDonald
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.
sushilshirbhate
nice tutorial
EvilDr
Erm, it doesn’t work on my IE3 (hehe…)
Andre
Yes really nice tutorial !
Cristina Sturm
Wow, I loved the “1-piece-o-image” trick for the gradients, I would never think of that! Thanks!
Jordan Walker
very nice indeed, thanks for the tut.
RIchelle Anderson
Great Tutorial thank you so much. I will be happy when CSS3 is more accessible through all the browsers.
CodeMyConcept
Great tutorial! You make it clear and quite easy to follow and understand.
Excellent input. I’m going to try it later on today.
doc
Very goos stuff. Clean, simple and effective. Great stuff. Thas’s we love CSS
randsco
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!)
kesc
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.
matthew Aebersold
Awesome tutorial! Thank you for this, I will try this code out very soon!
Les
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.
Mary Lou
This is a really good tutorial and a beautiful menu, thanks a lot! Very smart usage of the gradient!
Derrick
Very nice work.
glynn
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
glynn
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!
jinilon kelly
hi friends
Free check your website worth:
websitereckon.com
WebsiteReckon contains a collection of useful features such as checking Google Page Rank (PR), Compete and Alexa Traffic Rank, Backlinks Checker, Server IP and Location on Google Map, DMOZ and Yahoo Directory Listings and more. You can use it for various purposes include doing research before buying or selling website; want to find out how popular the website is; use it as SEO analytic tool to improve your site performance; or just about curiosity.
websitereckon.com/
Sarah Sarniak
CSS3 has such cool features. I wish that so many people didn’t use IE6 so I could just stop checking for compatibility in that browser so I could use all the cool things for CSS3
Ben Teoh
The more I look into CSS3, the more I’m loving it. I’ll have to implement this into my next site!
capsiplex
I will try this code out very soon!
Next Day Flyers
I like the gradient too. I hope to use the script in some upcoming work.
vei
css3 is so good ，i hate IE！very！
Helen
An image with code instead of text. Great!
Susan
I don’t seem to be able to tab through anything except the top level menus, so it wouldn’t be accessible, which is a “breaker” for me.
ferizaenal
nice one.. thanks ^_^
bolo
Can it run on IE6?
john
what is your website worth?
free check here…
websitereckon.com
thanks
Daniel Long
This is a really good technique and will definitely give it a go myself when doing my next piece of web design. I think it is a really stylish navigation bar, and something that could be incorporated into a lot of designs. Even in the supported browsers it doesn’t look so bad. Definitely worth trying out.
shoaib hussain
this is just so nice,will implement this in my next project.thnx a lot
Ulrik Hvide
Nothing special about the method you use except the nice use of css3 features such as drop shadow and rgba.
Tutorial City
Opera 10.5 Beta already supports border-radius, so I think it would be better to include also ‘border-radius’ (two last selectors).
Adding transitions would take this effect to the next level!
Michael van Leest
I have some issues with submenu’s being hidden under a other div below the menu (containing a mbScrollable banner rotator).
Any ideas how to fix this issue??
Patrick Offczorz
Thanks for this Post.
@bolo IE6 ??? What this ? :)
Iria
I don’t know…
the article is very interesting to learn some CSS3 functions but on IE6 this is just a mess. I know we should just let IE6 die alone in its misery but at least I’d like my menus to be usable by everyone.
rony
hi Friends
what is your website worth?
free check here…
websitereckon.com
thanks
gokhan
It seems pretty complicated to make dropdown multi level menus, thanks for bringing up the code with explanation.
Tom Fotherby
Very impressive! I went to the demo and did “view source” and was totally blown away by the simplicity and elegance of the HTML and CSS with no JS. Thanks for teaching me a bunch of tricks in one article. The “gradient image” trick is particularly inspiring.
Bring on CSS3 compatibility and the death of IE6 market share…
Geektantra
Nice work. Only one thing missing “hoverIntent”. Having hover intent on to this will make it look really great.
Regards,
GeekTantra
Invisible URL
Ahhhh…a very nice tutorial mate. Thanks for sharing the dropdown menu with us :)
Nick Parsons
Impressive, Nick. I love that fact that it still looks so great even in faulty browsers, and even sleeker in CSS3 compatible agents. I’m excited to use this in my next project!
kok aan huis
It looks good in the non supporting browsers also :-)
Olivier
Great article very well explained. Thanks for high-value examples.
Carl114
Nothing does not exaggerate. All round. It is not nice, soory.
LONO
good post… i am trying still get my head round everything
Didrik Nordström
Iria: For IE6, you could use a separate stylesheet, with a completely different look. Make it look like crap. Make IE6-user wish for a better browser :)
Scavinzer
Wow….My heart is too full for words. It work Fantastic Skill!
Shevaa
Wow… Nice Post… I got in Correct Timings… Thx Nick
Skyrocket Labs
Nicely done. I’m going to experiment with this puppy.
Rick
Thanks, I really like the gradient over a solid color trick… gonna have to use that now
Darlinton
Its cool but its wrong…
the itens with have drop down subitens must be flaged as that.
Roy Vincent
I think the concept of this is similar with sucker fish…
Skyrocket Labs
This is so cool. Your post inspired me to create a variation in the form of a horizontal drop line menu: http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
GwenDragon
Opera 10.50 beta shows the blue background color of the selected menue entry not in rounded corners like Firefox, Safari or Chrome.
In your code is something missing. ;)
If you change the CSS for first-child and last-child the menue does work correctly in Opera 10.50.
#nav ul li:first-child > a {
border-top-left-radius: 9px;
border-top-right-radius: 9px;
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
Kind regards from germany
GwenDragon
jinilon kelly
hi Friends
what is your website worth?
free check here…
…………………………………………….
websitereckon.com
………………………………………………….
thanks
wptidbits
From what i read, currently only few browsers supporting CS3. That means, those major browsers should be. Worth to try over. Anyway, excellent design there you have. Keep sharing. Thanks in advance!
Diego
Another hacks to bring this script in Opera 10.50:
/* main level link */#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 1.6em; /* This was added */
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; /* This was added */
}
#nav ul a:hover {
background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0; /* This was added */
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
With this in mind, the script works perfect in Opera 10.50
Greetings!
1-tm
Oh.., full-creative!!!
Thanks Nick
Fred
Great tutorial. CSS3 makes life so easier.
rys
but it is not supported in IE6&7 :(
Vladimir
very god, thank you – this dropMeny wil definatelly be sold anywhere for any client. I really like your posts. One question only – if we get stuck wit some of works, can we contact yu for help? Thanks
Sam Ng
wish we have only one type of browser!
largest
best to follow
largest sale
really attractive….new horizone….best i bought
largest sale
templategang
largest sale
best sale templategang
largest sale
to beat monster here comes templategang
citywebstudio
best price website design…..goood quality best designers….
citywebstudio co uk
affordablewebdesignstudio
best price…affordable …
affordablewebdesignstudio co uk
affordablewebdesignstudio
latest design…web 2.0
lowest price..
affordablewebdesignstudio
alll small cmpny
design
templategang
design
templategang best price
social Bookmarking
What’s a Nice Looking menu….. Thanks
tamil movie
nice thanks for sharing
11EN1
Love it great thx!
Adrian
Wow there is a lot of spam on these comment boards!
Anyhowz, Thanks for this great description on setting up a css3 drop down menu. I have been a big fan of suckerfish and superfish drop down menus, but can see them getting replaced by techniques similar to this.
Thanks Again.
download image
What’s a Nice Looking menu….. ..Thanks
Korea_yuk
very Good !!
ktown
awesome tutorial.
ebsoft
nice tutorial…
thank you
Antallaktika
I love your menu and appreciate also that you have demo!
Template
Excellent tutorial..Thanks..
Zoe
Wow, such a great tutorial and it’s great to see such accessible, beautiful design – thanks!
Terry Reilly
Thanks, for a great post. I have learned so much from this (and your site) about CSS.
Thanks Again
jek
can i download the source, thanks
Ryan
I love your idea about using a transparent gradient image with varying intensities to control on-screen gradients. Very reusable and friendly. I like to use PNGs for transparency; however, since you are applying it as a filter without rounded corners, a GIF would work just as well and be supported by older versions of IE?
Medya
Excellent tutorial. I have learned so much from this about CSS.
Thanks, for a great post…
Hong DUc
Can anyone clear me up the usage of ” > ” in CSS, I’ve have never seen nor used them in my css, is it a new feature in CSS 3 ?
Robert
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”.
Michael
once again awesome. thanks very much. Its easy to pull the code if you view the source of the demo. All you need to do is grap the gradient image. You can work out where it is.
cheers
brad
Great tutorial, loved it. Been looking all over the web maybe someone can help. Say I wanted the items underneath my projects to be all different colors, how would I go about doing that? Have one roll over with blue, then another yellow or anything like that. Thanks again for the tut and any help.
Aivea
Excellent post. Keep up the working and looking forward to more great articles in the future.
ijjal
wow..i can try it now..thanks
Johan
I´m new with css and css3 and want to learn more about it. Like how the HTML-code is in this tutorial.
Cathy Mason
This is very useful! Thank you!
ladybug
Thank you!
Very Excellent tutorial.
Jae Xavier
Very helpful annotations there. Sometimes I get lost when I’m coding.
tasarhane
nice.. ill try it soon.. thanks.
jocelyn
Great works, i hope that microsoft will finally one day accept what other browser do natively
Thank’s again
Web Design Philippines
Thanks for the very great tutorial. Very informative and useful.
cowolco
I really like this tutorial, thank you very much..
JimmyJam
Nice.
Quick Question (I’m a total rookie):
What’s the exact code that makes the list (er, menu) horizontal rather than vertical? Or how would one make it vertical?
Also, did you post the png graphic you used (I like the version without it though, but I wanted to check it out).
Xiansheng
Dosn’t work under IE6….but really good.
kvz
Fantastic work!!
Web Design Thessaloniki
Great post! I’ll try it to my site.
Thanks!
Web Design
great stuff is came in handy for our last client thanks a bunch
kalamaras
Dosn’t work in IE6
e-xronos.gr
ill try it soon.. thanks
giorgos evagelou
i just tested and it works! its amazing… thnx
MatheusMK3
Can you do that too on the top menu, where is index, etc, like in Mac OS X, the split buttons effect?
Thanks, still a great work!!!
Mac_xim
This is amazing, this is beautiful.
Thanks a lot !
Great job !
Web Design
Great work gracias :)
Saiko_sama
Great work, just one question :
on the demo you put the class=”current” on “home”, it works. As long as you will put the current class un the 1st lvl it’s fine to get the nice effect, but what if you put it on “N.Design Studio”, how do you get it to work so that “My project” still gets the nice grey rounded effect ? It’s someting about selecting the parent of the .current class, which is impossible in css, you can select childs with >, but a < selector does not exist.
I don’t know if I’m very clear about my thoughts don’t hesitate to ask me further questions
Nevertheless : NICE work once more !!
Cachi
Dosn’t work in IE7
charles rowland
@ kalamaras, seriously… IE6… let it die already….
singgum3b
Hey! I have a question about background tag shorthand:
background: #7d7d7d url(img/gradient.png) repeat-x 0 -110px;
What does “0 -110px;” stand for? I guess it affect the transparency of the image,
but i found nothing about this shorthand structure even on w3.org!! (just none about opacity in this). Still firefox 3.6,ie 8, chrome support it (OMG).
This is cool, but i still want to know where it come from.
Heeeeeellllllllllllllpppppppppp!!!
singgum3b
Haz! I figure it out!
It’s just placement of png’s transparent area, none related to opacity control.
a bit dissapointed but this still a good technique. Thank alot!!
singgum3b
@ saiko_sama: just add .current class to both of them =]
or, if it’s conflict, just made another class for it–> got the fx.
or , might you want to use just one class for the child , then select the parent through the child —> not much reality, why would you do so? since you can do the revesed easily? that why they just have > and not <.
Saiko_sama
Hi tank you singgum3b for the answer. Actually when I posted the comment I could not add any classe, I’m working with my client’s CMS and I did not have access to the code that generated the menu so I could not modify anything.
I finaly got in touch with the admin of the CMS ( not an open source one, hélas…) who accepted to give me the piece of code so I can now modify my menu : Yeahhh ^^
Have a nice day ;)
Hutch
Your none image version isn’t working to display the sub level navigation (hover over N.Design Studio, the flyout is hidden) in IE7. The image one is working in IE7 to display this. I’ve compared your css and other than the image, there isn’t any difference (that I saw). Any chance you know what it is? I’d like to use this, but IE7 is still a widely used browser so I’d like it to render properly there as well. Any help would be greatly appreciated.
Pariuri Sportive
I HATE using Word for this kind of effect. It’s extremely limiting. I just completed an assignment for a set of wedding banquet place cards. The bride had already bought a set of those preforated sheets to run on a desktop printer.
She had the guest list on an Excel document and wanted to use Word’s “Mail Merge” labeling feature to run them off. That would have been fine, except that she wanted a particular color for the font, and a specific color and offset for the drop shadow. I couldn’t get the effect needed from Word’s “Word Art” feature.
So, I ended up, after wasting a lot of time showing her the problems, doing it in InDesign. I knew that appication well enough to do a quick template layout and running text boxes for me to place the names, with my “style sheets” to automatically add the drop shadow effect we wanted.
No criticism of you intended, but I will point out, again, that designers have a LOT of different applications to do their job. Photshop is good for some things. Illustrator for others.
Still others for InDesign, Word, Excel, Flash, Dreamweaver and so on. The more in my “tool box” the better I can do different jobs. As I like to point out, by analogy, one CAN drive a nail with the flat side of a box wrench, but a hammer does a better job of it.
CSS3 Menu
Hi, fantastic article! I’ve just made a GUI wizard to create menus based on your ideas, please take a look at http://css3menu.com/. Also I added some nice Android-style menus. Would be great to hear any comments!
Thanks!
Booking
Excellent tutorial that I use on many sites.
Sivaranjan
Lovely post, i had been struggling to find something like this for quite a while. Thanks a lot for sharing. I am going to add it to my CSS aggregator site.
neoayi
very good!
Sneha
its not working in the IE. pls help
Rod
Hi,
It’s a great demo, however like Hutch, i found that your non-image or pure CSS3 version does not work in IE7. The sub menus do not show at all unfortunately. Any advice on this would be appreciated.
Thanks.
Css Collector
Nice css dropdown menu, but what about adding a simple dropdown effect?
Okcoola
This is “CSS3” Dropdown Menu , IE7 does not support CSS3 very well.. upgraded to IE8+ ..
zacarias lavin
hello, I constructed a similar menu for a couple of years ago for a graphic design studio and works on all browsers, you can see here http://www.elojodelhuracan.com (html version)
Kelly Johnson
Hey Pariuri-
I sure hope you used dynamic data fields in your InDesign template to import that Excel file and avoid having to type all those names!
I agree, there are many tools for us designers and many functions within each.
Gina
wow, very interesting post… a little different to me… T^T
eFbé
not bad. in my opinion the appearance of the drop down is a bit fast. you can slow it down at least in safari with the duration transition (-webkit-transition-duration: 1s;) introduced here: http://bit.ly/1cEnxH.
istoselides
love the design of your website!
jonathan
The following jquery script uses the same CSS functions to make the corners for the CSS3 browsers, but also uses an other way to make corners for the ones (like IE) to make corners to.
http://www.malsup.com/jquery/corner/
have fun ;)
John Athayde
@Rod/@Sneha – This won’t work in MSIE 7 and lower as these attributes aren’t available. You will have to provide some other kind of menue if you need to support those browsers. You could also look at trying something like Modernizr.js or eCSStender to push those browsers to mimic CSS3 attributes.
Janak
Awesome resource (and, awesome site design too… you rock :) ).
One question, will the CSS3 + Image version work on IE-6/7?
(I dont mind if fancy stuff does’t work, will the basic dropdown stuff work on IE6/7?)
thanks
Janak
tibo
Hi,
great work on this menu but I use a HTML 4.01 Transitional doctype and while its working perfect on Chrome & Firefox, it’s not working on IE8.
I’m not well informed about those doctypes stuffs so am I missing something here ? or is it only compatible with XHTML docs ?
Thanks.
robb
your work is very nice zacariaslavin (I’ve seen in safari)
Progs4u
Thank you so much ..
You are very cool
Cody Swann
Good stuff Nick.
Any chance you looked at performance differences with css3 gradients vs background image?
Web Guy
love the design of your site. great css tutorial you ahve here.
Web Guy
thanks for the tip. been working with css drop down menus for a while now and i love it. CSS is so easy to work with.
code pixelz media
Nice article. Thanks for taking time to create this article.
Jacob
Can someone explain what the “>” does in the css. Like on “li:hover > a”
Thanks.
paul s
WOW! nice….I just saw the flash version … html version is with css3?
131 zacarias lavin
June 18th, 2010 at 9:32 am
hello, I constructed a similar menu for a couple of years ago for a graphic design studio and works on all browsers, you can see here http://www.elojodelhuracan.com (html version)
yohan
cool, i love it :)
Σχολή Οδηγών
nice post thnx!!
hanifu
WOW！！it‘s so cool!!
ndtechie05
how do you center the links? thanks.
will ceare
Nice CSS tutorial, i really like the fact its all browser compatible, too often i see really good tutorials, but they don’t work in IE mainly. I will be sure to use this in my next site. thanks
Ian Topple
This isn’t working. Everything was working fine until I added the #nav li: hover > ul and put in the display:block; When I mouse over the links, the child uls do not pop up. Any advice?
webmaster
Nice CSS tutorial, i really like the fact its all browser compatible, too often i see really good tutorials, but they don’t work in IE mainly. I will be sure to use this in my next site. thanks
eeeeeeeeeee
gooddddddddddddddddddddddddddd
Modifier
it’s realy good and usefull ;-)
EMR Software
Thanks for the post, it really helped me to solve the CSS Problem.
Chris CC
Awesome tutorial….but where do go to download the source code?
Chris CC
Where do i go to download the source code?
ricky
adding this line to eliminate border when you click the link
* {
outline: none;
-moz-outline-style:none;
}
azman
nice menu. i’ll try
thank you
CMMaung
very nice post! I appreciate it!
Lyplba
instensitiy or intensity ?!
DuJing
very good, very beautiful !
Leonard
Great menu! I love it.
One problem though: when inserting this menu into a html5 document it won’t work in IE7.
Check it out: http://kookerij.websitenodig.nl/menu-test.htm
Second link has a submenu, but stays hidden in IE7.
Anyone got a solution, besides changing the doctype? :-D
Arturex
[TO:Leonard on comment 165] I believe the reason it hides the sub menu on ie7 its because is showing behind the image, did you try it without that image and perhaps playing with the z-index parameters
jackcheng
Click the “view demo” link . After entering the demo page rightclick and page save as…
Chris
These are all very nice but in Opera, the gradient image shows rectangular, not rounded!
Cheers
seolar
A really nice and really helpful tutorial for creating well looking css navigations. I like this tutorial very much and I will create it now for my own. Only for testing this one. Please keep on writing tuts like this one and all the others more!
Thanks for this article!
24HR San Diego Mobile Notary
Wow! These look really nice. Great work on giving us all a step-by-step tutorial on your drop-down menus. Thanks.
Another great article.
Kurt
24HR San Diego Mobile Notary
damian
@Leonard.
Did you resolve the IE7 issue?
I have played around with the z-index as I have a Nivo Slider div and the drop-down just won’t appear over it, just tucked behind. Grrr.
Damian
I finally got it to work in IE7 and html5. All I did was give the that contains the with the dropdown the highest z-index. So far so good.
Damian
Oops – my comment has dropped the html tags of ‘header’ and ‘nav’ within.
imtikhan
thanks infonya
Melvins
I saw the demo and I really like dropdown menu. Rounded buttons looks better that the square one. I must say that the code given by youis very useful to all the designers and I will also implement it in my website.
Los Angeles Web Design
mens ties
This article gives the light in which we can observe the reality. This is very nice one and gives in depth information. Thanks for this nice article. Good post.. ..Valuable information for all.
djrayon
To work with IE7 you have to brake it down in 3 files.
navigation-base.css
navigation-ie7.css
navigation-ie8.css
Now.
In you IE7 file you have the gradient code
for the 3 things, in the ie8 file you have filter version.
in the base you remove the filter property.
And you load them into your html with conditional commenting gte IE 8 and lt 8
jacky
This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. Youve got a design here thats not too flashy, but makes a statement as big as what youre saying. Great job, indeed.
R.D. Pullen
I surrounded the menu with a div to position it and then added the line below. This sets a regular width for the main line and also centres the item text.
div > ul > li > a {width:100px; text-align:center; }
Thank you for this splendid page.
fdgfdg
myso
satya
how to buttons create in website desining send few tecnical points and examples and source code and complete website design and code send me my mail id
Steve C
Hi, I cannot get it to work with IE7. The drop downs go behind anything else I have on screen and I cannot get them to appear in front. I’ve messed around with indexing but still no joy.
See the demo that doesn’t work on here…
http://domino-39.prominic.net/A55A21/Food.nsf/foodjudge1?readform
Thanks for any help.
Busy Teacher
Thanks for the great multi-level menu, hope you don’t mind if I use it on my website instead of the current one! Love the ‘Mac-ish’ look and the text shadows!
rthsrdt
fgfalert(“”)
sonnerie portable
This article gives the light in which we can observe the reality. this is very nice one and gives in depth information. Thanks
Topan Aprilia
This bog is very beautiful so much that I can learn
thank you
yogesh
nice..tutorial
Hamed
Excellent tutorial..Thanks
Gpak
Thanks for the great job!!
spb
Great code! I have noticed that unless you have at least one menu item with the class=”current”, the page controls below the menu moves slightly on mouse-over the menu. This setting is crucial: “border-top: solid 1px..”. Any guess on what’s happening? N.B. I am using the non-image code version. Thanks.
ciptard
nice..
i like it..
thanks for your tutorials..
Franklin
Nice drop-down menu and very detailed tutorial. Can I promote it on my site? I have other apps, widgets, and tools there. Feel free to check them out at appsandwidgets.net
Ulrich Pingel
Hi,
it’s a beautiful dropdown Menu, but I think if I select a 2nd-level submenu (e.g. MyProjects -> Web Designer Wall -> Design Job Wall) the first-level-selection (Web Designer Wall) have to highlighted as well … I think so …
Nevertheless – really beautiful.
Ulrich
galoga
waw, nice info. thanks to share
Bikram
iam bikram 4rm india man it is mind blowing fantastic tutorial sir u plz send me a pdf tutorial plz i thought east or west ur the best.
Gurpreet
Nice tutorial website
Very easy to learn
Straight forward
No extra bla-bla………..
GOOD
hmm
menu doesnt work in IE 6 …. forget the rounded stuff .. atleast it should work normal
PiT
I have found an issue for IE7 :
#nav li:hover a
{
display:inline-block;
}
great tutorial website, thanks
krike
css3 rounded corners rules :D
Submitted on cms tutorial: http://cmstutorials.org/tutorial/detail/css3_dropdown_menu
iRvanFauziE
doesn’t work in IE6 :(
asdf
Why omit the standard css3 attributes in some places, like box-shadow and border-radius? Nice way to not support browsers which are implementing them.
mazda
Nice pack of CSS3 menu techniques.
ron
I can’t manage to change direction of all thi menu to RtL
Walter Coots
I second Ulrich’s sentiment. It would be nice if the link that activated a submenu stayed highlighted. The relation gets lost when the highlight disappears. Is there a way to do this without JavaScript? From what I can see, CSS selectors are unable to ascend.
Walter Coots
Got it!
#nav ul li:hover { background:#cad5e9; }
John-Paul
This is a very nice tutorial.
Thanks
meem
Hey how can I download the menu? I’m new at this and I would like to use it
joseph
great tutorial but I need help on how can I make drop down menu in an image button please help thanks :)
Juno Mindoes
If you think black iphone 4 is a little dull, it’s your time to change it to a more delicate color. Let’s get the iphone 4 white!
Rolex Parts
Interesting post. Thanks for sharing.
Great post thanks for sharing a informative article keep it up
Henry Peise
Do you want the latest white iphone 4? Now we supply white iphone 4 Conversion Kit with elegant and delicate figures can surely be your best iphone 4 company.
RS
Thanks for sharing new information. I’ve never paid attention to such details before. I’ve also found a lot of nice CSS3 lessons. This one is just up to the topic: css3 video lesson . Hope, you’ll find it interesting.
SEO for Google
This is great man. Thanks for the good work! SEO for Google
pandora
I second Ulrich’s sentiment. It would be nice if the link that activated a submenu stayed highlighted.
best iphone cases
If I got a chance, i will prefer buying the iphone 4 white but not the iphone 4 Black. Who can tell me where is the Best iPhone Cases I would really want to take one. Best iPhone Cases and Covers, Sale iPhone 4 Cases, iPhone 3g Cases and Accessories
Antonio
Great tutorial! Many many thanks!
pink lotion hair
Wow, this was the mostinformative point I studied around my lifetime. Appreciate it.
Uçak Bileti
türküsüüüüüü
Aileen Xie
That is awesome! But what is the browser is IE, no radius & shadow are supported?
Rayroger
A small but interesting insight in to using CSS3. Thank you very much for sharing it. No matter how many different views people show or explain the use of CSS3 you always see a different side you did not see before.
nasim
that’s really nice,thank you,how can i download this code
HaCoz
Simple & Great!
Amelia
Hi, I tried to do a CSS3menu for the website http://www.shangpa.org. It works fine in all browsers except in IE. The children sub-menu simply wouldn’t show, could you please help to advise what is wrong? Thanks. Code as below:
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;behavior: url(border-radius.htc)}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;behavior: url(border-radius.htc)}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li:hover{
position:relative;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
/*
ul#css3menu1{
display:block;font-size:0;float:left;}
*/
ul#css3menu1{
display:block;font-size:0;float:left; z-index:1000;
}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS,sans-serif;color:#ffffff;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#670033;background-image:url(“mainbk.png”);background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma,sans-serif;color:#000;text-decoration:none;behavior: url(border-radius.htc)}
ul#css3menu1 li:hover>a{
background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;font:bold 14px Trebuchet MS,sans-serif;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url(“mainbk.png”);background-position:0 100px;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a{
background-color:#FFFFFF;background-image:none;font:14px Tahoma,sans-serif;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
height:22px;line-height:22px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;behavior: url(border-radius.htc)}
ul#css3menu1 li.topfirst:hover>a{
line-height:22px;}
ul#css3menu1 li.topmenu>a{
height:22px;line-height:22px;}
ul#css3menu1 li.topmenu:hover>a{
line-height:22px;}
ul#css3menu1 li.toplast>a{
height:22px;line-height:22px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;behavior: url(border-radius.htc)}
ul#css3menu1 li.toplast:hover>a{
line-height:22px;}
Will K
On the issue with IE7 not showing child sub-menu on hover: the reason is because IE7 doesn’t honor li:hover on secondary and tertiary levels without using the Suckerfish! This issue drove me nuts for several days until I figured it out. Use the Suckerfish (or the jQuery equivalent) and it will work – with the added bonus that IE6 will toe the line as well – as long as you code the proper CSS for it.
tütüne son
If I got a chance, i will prefer buying the iphone 4 white but not the iphone 4 Black. Who can tell me where is the Best iPhone Cases I would really want to take one. Best iPhone Cases and Covers, Sale iPhone 4 Cases, iPhone 3g Cases and Accessories
Stew
Outstanding work. Love the cross browser-ness of it! Even if IE does spoil the party a little.
Chuck Rowland
Thanks, great information. I will be back to study some more. The cross browser element is well worth knowing.
R.D. Pullen
I have got your menu working very well But… you do not highlight it is written to work in XHMTL and not HTML. This implies the rest of the site must be written in XHTML, including all the Javascript and thus creates a whole bucket of problems. I cannot recommend it at all. Great for Firefox but not under the market leader! Very sad.
Mustafa
excellent work ty
Tomás
Wow, that’s really awesome!
But have you thought of using CSS3 transitions for the menus to appear, the BG colors to change, etc.? That would be triple awesome.
Congratulations, it’s really cool!
Cesar
hi!, im having some problems with the rendering of the nav in ie9! the subtree leves doesn’t show the way it should…it’s just ugly, can someone help me?
stephen willson
A really nice and really helpful tutorial for creating well looking css navigations. I like this tutorial very much and I will create it now for my own. Only for testing this one. Please keep on writing tuts like this one and all the others more! roulette strategy
Web Design Dave
I’m about to get started adding this to one of my new sites! I was doing some IE7 testing, and the 2nd level dropdowns aren’t showing up as expected. It wont matter to me, and i’m only using a single level, but I thought i’d throw it out there. I wasnt able to read through the pages of comments, but i’m assuming i’m not the first person to say this. Your site is amazing. Thanks Nick!
SEO Freelance
Thanks for the stuff, and I like some of the comments, it is really helping in my SEO Web Design freelance projects.
ant_g
This is just not working for me, any help please!
Firstly, to get the main menu displaying across the screen I found I had to set a #nav li style with display:inline; (and some padding)
of course then the sub menus display inline, so I had to give them a separate id to set a block display for them.
Finally, when they display, the sub menus appear to take their absolute positon from the parent ul and not the li that they sit in, so they popup all to the very left of the main menu.
What am I getting wrong? I can supply the code I’ve used, but its not live on a website at the moment to show the end results.
Apolo McCloud
hey I would like to download it, would u be good to tell me how??
Krazy Chor
chori karvi e gunno 6……………………..
pan e mara mate nahiiiiiiiiiiiiiiii………(Exam ma)…………….:))))
รับทำเว็บไซต์
cool navigation-menus
thanks!You made some good points there.
shameer
Thank you for CSS menu tutorial……………..I like it
css splash
Looks Good! Css Splash | Web design Inspiration gallery
mark
The menu’s are quite nice. CSS is great and i’m glad it’s used more widely now for menu’s and such. I use flat css menus now but was thinking of trying drop downs. Thanks for the code, i will experiment with it.
J A
Nice menu, but it has bug in IE. Nobody out of 241 people noticed?
In IE, the blue selection line only appears when cursor is ABOVE text, but if it is on the same line but outside the text it won’t appear. However if the item has sub-menu, then sub-menu will appear – so it looks kind of strange without the blue selection line.
The solution is to change inline type to inline-block.
Good luck.
J A
And one more bug css-gradient-dropdown has broken sub-menus in IE7 and it is not rouned in IE7 either. Not really cool…
Andrus
I tried this menu in iPhone emulator. Root level contains 6 items.
There are 3 items in first row and remaining 3 items are wrapped to next row. Wrapped items lose background and look ugly.
It is not possible to select any item from aubmenu: trying to select item from submenu activates wrapped root menu item instead which is rendered above submenu in same place. Same issue also occurs if browser window width is small.
How to create menu which is usable from iPhone also ?
Mike
Gradients don’t work in Opera. You should fall back to images for browsers that don’t support gradients.
Andrus
In iPhone menu items in horizontal menu which have submenus are not working. Only menu items without submenus are working.
In the iPhone emulator http://code.google.com/p/ibbdemo2 all menus are working. How to create dropdown menu which works in real iPhone also ?
How To Get Taller | How To Put On A Condom
This article CSS3 Dropdown Menu is perfection. Thanks.
How To Put On A Condom | How To Get Taller
A great instructional piece to learn plus a demo!!! An amazing way to learn indeed!
Bennett
A great menu. But I am having an issue for for over a week now, so had to remove it for now. As one hover over a link and the drop down opens/expand, it is visible over the breadcrumb but lies beneath all three columns of the pages. I have an OSC store. Even posted to forum for some tips, but nothing has worked. So am looking for a tip on why it behaves this way.
Jerry
You need to set the z-index of the menu so that it paints on top of the columns in your website.
Marcus Tucker
You’ve got the order of your CSS3 properties (i.e. the vendor prefixes) wrong – see http://blog.danielfriesen.name/2011/01/05/css3-border-radius-and-vendor-prefix-fud/
DeAndre
Hey do this work in Dreamweaver CSS.
dexx
age of heart attack decreased with each passing day, he said.
JWRIV
Very nice menu indeed. I have been slow to adopt CSS3 techniques myself due to browser support, however, the browser manufacturers will never catch up if the designers don’t start using them, with graceful degradation in mind of course.
Najim
For the drop down li’s to be activated by hovering anywhere on it rather than only the text in Internet explorer the Doc type has to be declared as
and not
So take care of it while implementing it in ie. Another thing I am still not able to solve is my #menu ul ul box does not appear in ie, only the portion that is overlapping the #menu ul in its right is appearing ! I think I am missing something !
Najim
I the above post my codes got deleted :( What got deleted is that the doc type should be xhtml and not html …. If that makes sense..
Azizul islam
hurrah!!! i got the dropdown menu code for me which was searching for long time.
it will help me a lot to charm my site. thanks for this code.
note: this code is more easy to use because of CSS3 and no need javascript.
enas
css drop down menu
Niyas Khan
Really helpful tutorial for creating nice dd menu…tnx
Salvatore
Thank you for this code.
How about using javascript for hiding menu on a click event ?
regards
Nick
This tutorial does NOT work. I did it for a website I was working on. And nothing….. I mean nothing happened. It didn’t look anything like that. Please fix the tutorial thank you.
james
ungrateful bastard.
miyijura
You are a dumb.
Everything works fine by the way.
dont curse
not working in ie6
Andres Vaquero
Does not work in IE6 because IE6 doesn’t have hover functionality. There is a hack however to fix it. You can use our best friend in these situations, Google, to find out how. Anyhow say goodbye to IE6 unless it is going to make you lots of money, which is unlikely, it’s obsolete.
M-ZEE
Im having a bit of trouble getting the dropdown menu to show. I belive its a Z order problem but I do not have a full understanding of the css and z order.
Maybe you can help me out…
I have a PHP page and the dropdown menu is behind the header
Christian
add z-index to the property below and set value to 999
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
top:6.35em;
list-style: none;
z-index:999
}
joyoplencing
Really helpful tutorial for creating nice dd menu…tnx…blogger jogja..
Mike
As you may know, the newest versions of Opera support CSS3 gradients. Also, there are a few things that should have rounded corners but don’t. Opera supports border-radius, however you are using the pseudo property (or whatever it’s called) with the -moz- prefix while not using the actual CSS3 property. I’ve taken the liberty of updating the CSS to be Opera compatible:
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #8b8b8b; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#a9a9a9′, endColorstr=’#7a7a7a’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#a9a9a9,#7a7a7a); /* for Opera 11.10+ */
border: solid 1px #6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ebebeb’, endColorstr=’#a1a1a1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#ebebeb,#a1a1a1); /* for Opera 11.10+ */
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#04acec’, endColorstr=’#0186ba’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */
background-image: -o-linear-gradient(#04acec,#0186ba); /* for Opera 11.10+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#cfcfcf’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#fff,#cfcfcf); /* for Opera 11.10+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
/* clearfix */
#nav:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
Casino
This really is one of the best intros on the subject I have ever read. I have been doing a lot of research and have read through hundreds of posts. I will definitely have to keep coming back for more great info
Mike
I just realized you missed a couple of box-shadow properties for the following too:
#nav {
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
#nav ul li:hover a, #nav li:hover li a {
box-shadow: none;
}
Here’s the updated CSS for non-Mozilla/webkit/IE browsers:
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #8b8b8b; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#a9a9a9′, endColorstr=’#7a7a7a’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#a9a9a9,#7a7a7a); /* for Opera 11.10+ */
border: solid 1px #6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ebebeb’, endColorstr=’#a1a1a1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#ebebeb,#a1a1a1); /* for Opera 11.10+ */
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#04acec’, endColorstr=’#0186ba’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */
background-image: -o-linear-gradient(#04acec,#0186ba); /* for Opera 11.10+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#cfcfcf’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#fff,#cfcfcf); /* for Opera 11.10+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
/* clearfix */
#nav:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
Digitalvaldosta
I ran into a problem with this menu “hiding” behind a jquery slider when viewing in any version of IE. The fix that I found was to add a z-index of 1000 to all of the position: relative properties. This only was required for #nav li.
Happy Coding
Dan
Completely useless without the code for the body. Can’t figure out what is labeled , , etc… in the body
Christian
use an
Christian
oops…use an unordered list
Prabhu Chandian
Thanks for the post, this is really very helpful for me.
Prabhu
Drupal Designer
Christian
Thanks for this gorgeous nav. Having a problem with sub list items. The text is smushing together when it is more then one word. how can I fix this problem. The site I am working on is:
http://ambiguoussounds.com/home/
Thanks for the help!
Christian
seems to be doing it on firefox
Julian
Man, why don´t you share the download link? Now we all must search in the demo for the code..
Carlos
Hi, this is awesome, but, i’m using it here http://www.superelectricos.com and it works on FF and chrome BUT on any IE doesn’t work at all, need help please! Thanks!
Josh
Love this drop down menu. Additional problem in IE (I was using 7), the highlight doesn’t cover the whole menu item. It only appears when the mouse is over the text.
Wolololol
Wololol
Lau
Simply great this menu looks very very nice, I tried to use on my personal blog, but in IE 7 and mozilla 3.5 looks very ugly, I hope everyone update their browsers and we can use css3 as css2.
joran
hey nice site is it ok if i use this for my site?
na.Pro1
Thank for your share:)
DeskLancer
not working with IE
web tasarım izmir
thanks for the nice post, I will visit your blog ,thanks for kind efforts and nice sharing
meds
Very nice button, like made with Photoshop. Thanks for tutorial
(aleb
Very attractive menu. I know I’m a little late in posting my comment by say, a year+, but it’s still very attractive. The question I would ask now is that after one and a half years, what else could you do to this same menu to improve it even more. I would be interested in seeing you ‘modify’ to the times and expand its creativity.
Thanks,
(aleb
Tidy Design
Really nice blog post, awesome in fact! :D
waqar khan
i want to creat multi-column sub menu with images have you someone any idea on that
Haris
simply put the images behind the submenu lists and create a new css for images.
araz
hi,
please help me.
how rename or add (dropdown menu) to style file.
Difference : “.sf-menu AND #cat-nav- ”
default file:
.sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; }
.sf-menu { position: relative; margin: 0; padding: 0; list-style: none;clear:both; float: left; margin-top: 12px; padding-left: 9px; margin-bottom: 1em; background: url(‘images/menu_bg.png’) no-repeat; height: 58px; width: 957px; z-index: 400; }
.sf-menu ul { position: absolute; top: -999em; margin-top: 20px; width: 212px; right: 7px; -moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); background-image: url(‘images/dropdown_top.png’); background-repeat: no-repeat; background-position: top; padding-top: 8px; z-index: 400; }
.sf-menu a { display: block; position: relative; text-decoration:none; color: #fff; padding: 23px 20px 0px 20px; height: 30px; text-decoration: none; text-shadow: 1px 1px 1px #000; font-weight: normal; float :right; }
.sf-menu li { float: right; position: relative; font-family: Tahoma; background: url(‘images/menu_line.png’) no-repeat; background-position: left 5px; }
.sf-menu li ul li ul { right: 212px; margin-top: 0px;}
.sf-menu li li { background: #ebebeb url(‘images/submenu_li.gif’) no-repeat; background-position: 24px 15px; height: 36px ; margin: 0px; float: right; width: 212px; z-index: 10; }
.sf-menu li a:hover { color: #00b4ff; }
.sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #121212; outline: 0; }
.sf-menu > li.sfHover.sf-ul { background: transparent url(‘images/parent_link_left.png’) no-repeat; background-position: 7px 11px; z-index: 200; }
.sf-menu li.sfHover li a:hover, .sf-menu li ul li.sfHover a, .sf-menu li ul li ul li.sfHover a { background: #f7f7f7 url(‘images/submenu_li_hover.gif’) no-repeat; background-position: 11px 0px; }
.sf-menu li.sfHover li a, .sf-menu li.sfHover li ul li a, .sf-menu li.sfHover li ul li ul li a { background: url(‘images/submenu_li_hover.gif’) no-repeat ; background-position: -100px -100px; width: 172px; color: #404040; margin: 0px; padding: 14px 0px 0px 40px; text-shadow: 0px 1px 0px #cccccc; }
.sf-menu > li.sfHover.sf-ul > a { color: #000; text-shadow: 1px 1px 1px #fff; background: transparent url(‘images/parent_link_right.png’) no-repeat; background-position: right 11px; z-index: 301; }
ul.sf-menu li.backLava { position: absolute; z-index: 3; background: url(‘images/lavalamp.png’) no-repeat; background-position: center 0px; padding: 0; height: 16px; margin-top: 42px; }
——————–
new code (DROPDOWN MENU):
—————-
#cat-nav { bottom:-14px; left:0; position:absolute; width:980px; z-index:100; }
#cat-nav-left {background: url(images/n-2/cat-nav-left.png) no-repeat; width: 10px; height: 64px; float: left;}
#cat-nav-content { background: url(images/n-2/cat-nav-content.png) repeat-x; float: left; height: 64px; width: 941px; }
.nav li ul {box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); background: url(images/n-2/cat_menu_bg.png) repeat-y; border: 1px solid #111010; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 0px; border-top: none; padding-bottom: 15px; }
#cat-nav-content ul.nav { float: right; margin-top: 10px; margin-left:18px; }
#cat-nav-content ul.nav li { padding:0 17px 0 0; }
#cat-nav-content ul.nav li a { padding: 8px 4px 21px; }
#cat-nav-content ul.nav li.sf-ul a { padding: 8px 6px 21px 15px; }
#cat-nav-content ul.nav > li.sf-ul { background: url(images/n-2/li-hover.png) no-repeat 55px right; }
#cat-nav-content ul.nav > li.sf-ul > a { background: url(images/n-2/a-hover.png) no-repeat 55px left; }
#cat-nav-content ul.nav > li.sf-ul.sfHover { background: url(images/n-2/li-hover.png) no-repeat top right; }
#cat-nav-content ul.nav > li.sf-ul.sfHover > a { background: url(images/n-2/a-hover.png) no-repeat top left; display: block; }
#cat-nav-content ul.nav li li { padding: 0px; }
#cat-nav-content ul.nav ul ul { border-top: 1px solid #111010; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
#cat-nav-content ul.nav li li a:hover { color: #00b7f3; }
#cat-nav-content ul.nav li a {color: #fefefe; font-weight: bold; text-decoration: none; text-shadow: -1px -1px 1px #0a0a0a; text-align:right; }
#cat-nav-content ul.nav ul li a { text-shadow: 1px 1px 1px #0a0a0a; }
#cat-nav-content ul.nav > li > a:hover { }
#cat-nav-content ul.nav li li {background: url(images/n-2/bullet.png) no-repeat 16px 21px; float:right; }
#page-menu ul.nav li li { background:url(“images/n-2/page-menu-bullet.png”) no-repeat scroll 16px 16px transparent; }
#page-menu ul.nav li a { padding: 8px 9px 16px; }
#page-menu ul.nav > li > a.sf-with-ul:hover, #page-menu ul.nav > li.sfHover > a { background-color: #232323; }
#page-menu ul.nav li li a { text-shadow: none; }
#page-menu .nav li:hover ul, #page-menu ul.nav li.sfHover ul { left:0px; top:45px; }
#page-menu .nav ul li:hover ul, #page-menu ul.nav ul li.sfHover ul { left:191px; top:-2px; }
#cat-nav-content ul.nav li li a, #page-menu ul.nav li li a {background: url(images/n-2/n-2/divider.png) no-repeat bottom left; display: block; width: 156px; padding: 9px 5px 11px 28px !important; }
#page-menu ul.nav li li a { background: none; padding: 0px 5px 0px 28px !important; }
#cat-nav-right { background: url(images/n-2/n-2/cat-nav-right.png) no-repeat; width: 19px; height: 64px; float: left;}
#cat-nav #search-form { float: left; width: 131px; background: url(images/n-2/n-2/search.png) no-repeat; height: 27px; margin-top: 15px;}
#cat-nav #searchinput { background: none; border: none; font-style: none; color: #646464; padding-left: 12px; display: block; margin-top: 3px; float: left; width: 95px; }
#cat-nav #searchsubmit { float:left; margin-top:7px; }
#cat-nav #search-form img {float: right; margin-top: -24px; padding-right:10px;}
#page-menu ul.nav ul { z-index: 10000; padding-bottom: 9px; background: #232323; border: 0px; padding-top: 2px; }
#page-menu ul.nav ul ul { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
————
Tanks
SEO
Thank you for that very interesting.
طراحی سایت
Thank you for writing this article. I really enjoyed it. Keep up the excellent work!
Seo Mauritius
Great menu and great tutorial totally awesome but browser compatibility with css3 still suck particularly in IE hope it will be fix
ankitesh
pls can you mail me this menu?? i mean the HTML and the other files?? please please
or else give me a download link…
orhanbt
This is verry good
Arif Riyanto
It’s cool gradient
Marius Swanepoel
Hi, Nice stuff. I tried it on IE9 and had to insert some CSS to get rounded corners. I now notice strange behavior on the drop-down menu “lines appearing” even on your demo. Any idea how to solve this?
Marius Swanepoel
I found the issue, it seems like the one “hover” style has some shadow CSS styling that causes the lines underneath all the drop-down options. I removed this for now and everything works again!
طراحی وب سایت
This is very nice !
zografos
Perfect creations Many gratz!!!
peterborough website designer
great thx for the post
Julian
Hi,
can you make it fade in with jquery? That would be amazing. Please mal back!
Thanks,
Julian
dred
thank tips
complex41
And then he handed you the thirty-five 45
RD Web Design
This menu is lush, very apple website like but better, thanks.
xbox 360
This is very goog
l
Hi,
Nice job. Ie9 does not like gradients and border-radius.
Atif Aslam
Love this drop down menu.
I will definitely use it on my website.
jingxiamnh
Youre so right. Im there with you. Your weblog is definitely worth a read if anyone comes throughout it. Im lucky I did because now Ive received a whole new view of this. I didnt realise that this issue was so important and so universal. You absolutely put it in perspective for me.
mishary
this is cool
ty
Nick
Fantastic code. Exactly what I needed.
I had one problem with IE 8 – the [ #nav .current a, #menu li:hover > a ] inherits down to the li tags and causes a bad display.
Adding “filter:;” to [ #menu ul li:hover a, #menu li:hover li a ] fixes it.
#menu ul li:hover a, #menu li:hover li a {
John
Great explanation! Not a lot of words, but the image of the CSS code is very ilustrative –> “an image said a thousand words” and the horizontal menu is awesome. So, Thanks!
Dheeraj Bansal
I always find this website as best, when ever I faced designing regarding issues.
Thanks again.
Sheik MohaideenA
Its just amazing .. Very useful website for every designer
تور
Thank you for that very interesting.
کیش
this site very nice tnx tnx
Roelof Wobben
Can you help me find this file img/gradient.png.
Then finally I can try to make this menu work for my new website.
ترکیه
tnx for this post .very nice
Id
tnx very goooooooood
miko
thanks nick for this tut.i’ll bookmark this article for my next project .yesterday i implemented another css3 menu based on this tutorial here :
http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/
P.S. Where’s your RSS subscription link ?
Chad
I love the look and functionality of this menu. Very well done! However, I’m having problems with the level 2 dropdown displaying in IE 8. I’ve read all comments on this thread and see that others are having the same problem. Has anyone found a solution?
I’ve tried playing around with z-indexes, and have even replaced some html 5 elements with divs but no success.
I would appreciate any help you might be able to provide! Thank you!
Jems Aarya
Thanks you sooooo mush….you are to good. :)
Emrah
İ want to use this menu. How can i take th code and gif pictures?
Gradient
hi thx… i am here https://webdesignerwall.mystagingwebsite.com/demo/css3-dropdown-menu/img/gradient.png
Luke
Really nice example, thanks for the use! One question, when I click on say ‘Contact’ how do I make the ’rounded-selection-button’ park on this page and not stay on the ‘Home’ selection?
(I’m sure I’ll wake up in the morning and figure it out eventually…)
Luke
…never mind, got it ;)
read the code, its all in front of you!
Bench
Thanks for making this tutorial very detailed. Great!
Lucas
Hey, how I fix it on IE 6,7,8,9 don’t know what versions are with bugs
Paulo H.L
Realmente uma otima maneira, quem sabe uma das melhores para a construção de menus interativos, fiz alguns modelos ultilizando JS para transferir as classes pois tambem encontrei erros com :HOVER como ja foi dito.
Eranda
Awesome! Keep up the good work!
FloFi
Does anyone know how I can change the .current class dynamically that it fit’s to >>current<< the page?
FloFi
just got it.
I used id’s for the tags which could be in a current state. And for the same tag I used to get an unique combination of id and class: “#li_id_xyz.page-id-xx” which I could use in my stylesheet. :)
Majid H
This is great tutorial man. I was feeling difficulties regarding this type of nav bar menus but thank to you. I will share this with my blog readers also at Blogger Tricks.
dd
dd
riya
aa
minyatoor
half of a well designed website is for the way that menu navigation looks like, thanks
banty love style
best
Ingwie
Great thing! I used FF to read the source code and was like: O.O!
For playing with it, i copied the SRC using FF…very nice menu you did there. Oh and where is the NotepadDesign? o.o
Sahidul Hoque
Hi,
Very good CSS menu. However there is a bug. When I click on a menu item I go to another page. When I comeback with browser back button I see the menu item is still open. I could not fix this bug, do you have any idea how to solve it?
Sahidul
γραμματεας ονλινε
nice post and a wonderful blog! love this theme!
rfa
regaeg
Bohemier
Great tutorial, thanks.
TIP: You can use SVG gradients to properly support rounded borders and IE…
asansör
excellent a jop.thank you it like.
Web Designer - Ray Creations
We too use CSS to design drop down menus, rather than use Javascript. Haven’t tried this menu, however, it looks great.
shivam shukla
Just for testing purpose… for example do we make two drop down menu in such a way that when user clicks on any of these they expand to show the further content. Clicking one shall not minimize the other ?
Rajesh Jangra
It is great, awsome. Try everybody who trying to generate a dinamic menu for your own site. It is very very simple to do.
Thanks very much……………….
karthimx
Very nice drop down menu with pure css.
Dr Saygın
thanks…
alovilla
nice menu. thank you.
fotovoltaika
I love your design and the menu of course is great!
Selma
I really appreciate you sharing this, you made it really easy to understand!
Here’s a quote for you
If you can’t explain it simply, you don’t understand it well enough.
Albert Einstein
You clearly understood it! :)
Neo
Great menu. I don’t see a link for downloading the source code?? Could you let me know where I can download it from?
rey
click on the ‘VIEW DEMO’ button above, right-click on the resulting page, select ‘View source’ or words to that effect (depending on the browser you use).
rey
… then click (or right-click) on the ‘style.css’ link.
Alexis
Not found in ipad.
:-/ any ideas?
tranks
maneeOS
this is really nice … i wish you provide more CSS3 TUT’s if you can … really nice
Retina
this tutorial seems to be great and this CSS3 dropdown menu is really beautiful but i am just starting upmyself to update myself with html5 and CSS3 and having lots of confusions specially how i could use HTML5 and CSS3 with html 4 and CSS2. Can you please write on this topic?
and yeah thanks alot for this dropdown menu.. i will try to use it quite soon.
Tomy
What Script Code for Blog?
centrifuge in india
what is the size of this script ?
Pat
This is a great use of CSS3. The tutorial is easy to follow.
Javi
Doesnt run in my code the dropdown, whats happening?
thanks in advance
david
css3 is more and more useful . hope ie series can support it like ff and chrome do one day.
Sean
Thank you.
Marc
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!
fgfg
ghghghghghgh
pezhman
thank you its very beautiful
pezhman
how can i chane it to rtl direction for persian language?
ali
hi thank very well, but how change menu to show sub menu right to left for arabic language
Lycan
just do this….
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}
LibertyBloggers
Thanx a lot buddy, U saved my life.
Kevin
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!
Suraj
When we click on the (as a example) ” About”. Is it appear like ” Home” (active) with styles?
Tuomas
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
Sean
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?
Sean
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…
Sean
Next time I’ll read all of the posts before making suggestions… I found the same exact ones on earlier posts… carry on!
Manoj
not working in IE6 not so good………..
man van
it also did not work on my site
removals
it did work with my site ……….
Andre
it did not work on ie6 too
van moves
great menu and but it does not work with older browsers
Blogger Templates
Very helpful tutorial.
Ammar @ Free Premium Themes
Thanks for sharing this menu. But where is CSS and HTMl code?
Karl
check the source of the demo
Idham
Nice, thanks for source :)
karthimx
Nice tutorial for drop down menu, used on my site. works great.
hi
thanks brother many many thanks
Ganesh kumar g
Where is the html and css code ? that image ? need to write, right ? :-) lazy …:-)
Matt
Ganesh K. – The lazy one is the one who can’t figure out how to get the css, html and the image!
This code also works perfectly on iOS/Safari making it iPhone/Ipod friendly. Thanks!
7OOOF.net
Well done… thanks
Max
Thanks for explanation!
Hammad Baig
thanks for the share css3 dropdown menu
Bryan
I love the menu… Just curious If you had any tips on how to center the main links in a dynamic width of the #nav ul …. I have tried several combo but am confused how to get this setup centered correctly.
xhtmlpress
Css3 is just like a revolution in the field of web designing but is a bit hard to learn. Thanks for sharing such a great tutorial , i was trying to make such menu for a long time but i was unable to find the best place where i can learn this. Thanks
goyang pattah pattah
mantap bener postinganya bang, ijin nyimak dulu, ahahhahayyy
Blogger Templates
Really helpful. I was looking for a solution to design pure CSS based navigation menu.
Nano
Thanks! I have a problem with the navigation in IE 8.
paman doblang bersabda
awesome
you help the blind
nice work
idham
Awesome, thanks for tutorial.
Jenny
That is CLEAN!
Manish Gupta
Thank you !!! Very nice work , you save my lots of time..
Elaine
Fantastic! Thanks.
7ooof.net
nice tnanks
Charan
Hi,
Very Nice Tutorial I had used this in many of my websites and all your tutorials are great.
mark
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?
s
ddddd
s
kkkkk
s
hhhh
s
你好啊
kashif
in #nav ul
top: 35px;
gives the space.
Alex Fernandez
It did not work!!
zahra
aaaa
Tadej
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;
}
John
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.
blanc
Thanks for making this tutorial very detailed. Great!
dhoni
great artikel….
i have a website look great….
thanks for your artikel
MacDemo
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 ?
Jamis Henrique
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?
present shop
nice solution with the gradient effect by shifting the background image
thanks
Cuong
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?
Cuong
*when
Cuong
problem solved, i used z-index property to make drop down menu on top of div elemnt
denish patel
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 .
Marko
Fantastic tutorial, very Pro…
Thank you.
Tony
Thank u :)
sunita
Thanks for tutorials
me
Is there sample code (.zip or similar)?
Ricardo
I would like to test, but I did not find the source to donwnload. Is there a source ?
viom jeet
Border-radius is not working on IE.. on Win7
What to do..
aris
made after its drop down menu, how to install the blog, please help
latif
its working :)
wordperfect
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.
Chris
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!
wordperfect
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?
Serge
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.
Alicia
Thanks for the tutorial! I found it very useful.
Billa
Thanks for your code. It is working but little problems I can solve those problems. Once again for your valuable tutorial about css menus.
Greg B
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??
jalingo
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.
Matt
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!
Vishal
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.
amar
yaar download krne k liye to do…………………kewal demo de rhe ho
jitesh
@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
Alex
Hello!
Nice job!
but in Firefox 13.0.1 something goes wrong with border-radius…
Ian Haney
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
Ramas SEO
I will try on my blog.
Thanks for tips.
Makro Web Dizayn
Blue color perfect.Thanks for sharing.
John
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?!!
Vany
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.
awanChollet
cool dropdown menu, I like it…
thanks…
kuku
Filitre Yapımı: http://play.kendincos.com/163368/Whldhtxptjn-filitre-yapimi.html
michael
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?
Alexander Huynh
This worked well thanks!
Alquiler yates Ibiza
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!
aaa
Its not working
Naman Gupta
how to change color of the drop down menu
lakshmikanth vallampati
I need this one very urgent… Please Please Please… prodive the link to download the complete source code. Or please mail me the complete source code to my mail. The Demo is seems to be different…
betty
I think this article is not finished,the menu of the second and the third levers should be given the position.
Atul
It is an awesome work !!
Esin
Thank you for this method.
Digital Dreams
awsome menu bar.I want more
tegatti
Please, can someone help me how to find the css source?
Thanks in advance.
sarvesh
thanks for navigation bar example, its really very used for me
Muhammad Ateeq
ahan nice love it <3
himu
Thanks for the post.
I am using this menu in one of my project. It just work fine.
Alquiler yates Ibiza
Please, can someone help me how to find the css source?
annie
bagaimana cara masukin css di c# ?
agak bingung sedikit …
thanks in advance
David
Thanks for the help it has offered me this article. I’m designing a template for a website of a friendship and this article could solve the problem or part of the menu of the.
asd
dasdasd
Credit Card Transaction
I think that everything said was actually very reasonable.
But, consider this, what if you were to create a awesome headline?
I ain’t saying your information isn’t solid., however suppose you added a title to possibly grab folk’s attention? I mean CSS3 Dropdown Menu is kinda plain. You might peek at Yahoo’s
home page and watch how they create post headlines to get viewers to
open the links. You might add a related video or a
related pic or two to grab readers excited about what you’ve got to say. In my opinion, it might bring your blog a little bit more interesting.
Andrew
I’ve added your code to my site; here’s a copy of my CSS – http://pastebin.com/Dn38bB0Y
On the site, when I hover over the LI that is supposed to “drop” it puts the dropdown list in the top left corner – if I change the positioning from ABSOLUTE to REALTIVE it puts the menu in the “right” location, but it acts as if there is a space for it, stretching the menu and moving the last top-level item to a second row.
Please e-mail me if my description is not helpful enough so I can provide a link to the dev. site.
Scott
Thanks for the tutorial. Although I’m half blind from trying to read the code in the .gif image it looks great on my site.
Please consider posting code instead of posting images of code, there is absolutely no benefit to using an image.
Anirudh
Wow ! Great Man ! Thanks :)
Bearko
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.
ayan
thanks really nice work….
kamal
like this side
Ilija
Great! Thanks, this is very flexibile and simply menu!
AJO
Hi there a very nice tutorial. Keep it up dude
diwakar
if it is free then why you are not provide gradiant.png
Ankit
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?
DymoLabels
hi sir
i really like CSS3 because CSS3 is batter than CSS2
keep it up
thanks for sharing
MARCOS
MUY BUENO