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.

View Demo CSS3 Dropdown

Preview

The image below shows how the menu will look if CSS3 is not supported.

menu preview

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.

gradient 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.

gradient image

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.

menu css

css code

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.

pure css

494 Comments

Adeel
Feb 23, 2010 at 7:25 am

Great tutorial. Thanks! Will have a play with it on the Notepad them I implemented.

choen
Feb 23, 2010 at 7:37 am

nice tuts. btw why not using css3 gradient for background

Andy Gongea
Feb 23, 2010 at 7:39 am

Flawless. Great work Nick, this css menu is very well executed. Kudos

Alistair MacDonald
Feb 23, 2010 at 7:45 am

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
Feb 23, 2010 at 8:36 am

nice tutorial

EvilDr
Feb 23, 2010 at 8:50 am

Erm, it doesn’t work on my IE3 (hehe…)

Andre
Feb 23, 2010 at 9:06 am

Yes really nice tutorial !

Cristina Sturm
Feb 23, 2010 at 9:28 am

Wow, I loved the “1-piece-o-image” trick for the gradients, I would never think of that! Thanks!

Jordan Walker
Feb 23, 2010 at 9:52 am

very nice indeed, thanks for the tut.

RIchelle Anderson
Feb 23, 2010 at 10:19 am

Great Tutorial thank you so much. I will be happy when CSS3 is more accessible through all the browsers.

CodeMyConcept
Feb 23, 2010 at 11:02 am

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
Feb 23, 2010 at 11:36 am

Very goos stuff. Clean, simple and effective. Great stuff. Thas’s we love CSS

randsco
Feb 23, 2010 at 12:11 pm

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
Feb 23, 2010 at 12:48 pm

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
Feb 23, 2010 at 12:56 pm

Awesome tutorial! Thank you for this, I will try this code out very soon!

Les
Feb 23, 2010 at 1:24 pm

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
Feb 23, 2010 at 1:41 pm

This is a really good tutorial and a beautiful menu, thanks a lot! Very smart usage of the gradient!

Derrick
Feb 23, 2010 at 1:57 pm

Very nice work.

glynn
Feb 23, 2010 at 2:22 pm

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
Feb 23, 2010 at 2:26 pm

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
Feb 23, 2010 at 3:07 pm

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
Feb 23, 2010 at 4:11 pm

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
Feb 23, 2010 at 4:47 pm

The more I look into CSS3, the more I’m loving it. I’ll have to implement this into my next site!

capsiplex
Feb 23, 2010 at 5:27 pm

I will try this code out very soon!

Next Day Flyers
Feb 23, 2010 at 5:35 pm

I like the gradient too. I hope to use the script in some upcoming work.

vei
Feb 23, 2010 at 9:22 pm

css3 is so good ,i hate IE!very!

Helen
Feb 23, 2010 at 9:37 pm

An image with code instead of text. Great!

Susan
Feb 23, 2010 at 10:37 pm

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
Feb 23, 2010 at 10:50 pm

nice one.. thanks ^_^

bolo
Feb 23, 2010 at 11:36 pm

Can it run on IE6?

john
Feb 24, 2010 at 12:42 am

what is your website worth?

free check here…

websitereckon.com

thanks

Daniel Long
Feb 24, 2010 at 4:09 am

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
Feb 24, 2010 at 8:12 am

this is just so nice,will implement this in my next project.thnx a lot

Ulrik Hvide
Feb 24, 2010 at 11:13 am

Nothing special about the method you use except the nice use of css3 features such as drop shadow and rgba.

Tutorial City
Feb 24, 2010 at 11:52 am

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
Feb 24, 2010 at 5:55 pm

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
Feb 24, 2010 at 6:09 pm

Thanks for this Post.
@bolo IE6 ??? What this ? :)

Iria
Feb 24, 2010 at 11:15 pm

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
Feb 25, 2010 at 12:23 am

hi Friends

what is your website worth?

free check here…

websitereckon.com

thanks

gokhan
Feb 25, 2010 at 3:47 am

It seems pretty complicated to make dropdown multi level menus, thanks for bringing up the code with explanation.

Tom Fotherby
Feb 25, 2010 at 5:08 am

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
Feb 25, 2010 at 6:13 am

Nice work. Only one thing missing “hoverIntent”. Having hover intent on to this will make it look really great.

Regards,
GeekTantra

Invisible URL
Feb 25, 2010 at 8:15 am

Ahhhh…a very nice tutorial mate. Thanks for sharing the dropdown menu with us :)

Nick Parsons
Feb 25, 2010 at 11:37 am

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
Feb 25, 2010 at 12:05 pm

It looks good in the non supporting browsers also :-)

Olivier
Feb 25, 2010 at 1:36 pm

Great article very well explained. Thanks for high-value examples.

Carl114
Feb 25, 2010 at 2:51 pm

Nothing does not exaggerate. All round. It is not nice, soory.

LONO
Feb 25, 2010 at 3:17 pm

good post… i am trying still get my head round everything

Didrik Nordström
Feb 25, 2010 at 4:02 pm

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
Feb 26, 2010 at 2:36 am

Wow….My heart is too full for words. It work Fantastic Skill!

Shevaa
Feb 26, 2010 at 6:52 am

Wow… Nice Post… I got in Correct Timings… Thx Nick

Skyrocket Labs
Feb 26, 2010 at 7:30 am

Nicely done. I’m going to experiment with this puppy.

Rick
Feb 26, 2010 at 10:40 am

Thanks, I really like the gradient over a solid color trick… gonna have to use that now

Darlinton
Feb 26, 2010 at 12:13 pm

Its cool but its wrong…

the itens with have drop down subitens must be flaged as that.

Roy Vincent
Feb 27, 2010 at 7:49 am

I think the concept of this is similar with sucker fish…

Skyrocket Labs
Feb 28, 2010 at 7:43 am

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
Feb 28, 2010 at 7:53 am

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
Mar 1, 2010 at 12:29 pm

hi Friends

what is your website worth?

free check here…
…………………………………………….
websitereckon.com
………………………………………………….
thanks

wptidbits
Mar 2, 2010 at 9:17 pm

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
Mar 3, 2010 at 10:04 pm

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
Mar 5, 2010 at 12:44 am

Oh.., full-creative!!!
Thanks Nick

Fred
Mar 5, 2010 at 3:48 am

Great tutorial. CSS3 makes life so easier.

rys
Mar 6, 2010 at 11:09 pm

but it is not supported in IE6&7 :(

Vladimir
Mar 7, 2010 at 2:20 pm

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
Mar 8, 2010 at 3:09 am

wish we have only one type of browser!

largest
Mar 9, 2010 at 2:21 am

best to follow

largest sale
Mar 9, 2010 at 2:23 am

really attractive….new horizone….best i bought

largest sale
Mar 9, 2010 at 2:24 am

templategang

largest sale
Mar 9, 2010 at 2:24 am

best sale templategang

largest sale
Mar 9, 2010 at 2:25 am

to beat monster here comes templategang

citywebstudio
Mar 9, 2010 at 2:27 am

best price website design…..goood quality best designers….
citywebstudio co uk

affordablewebdesignstudio
Mar 9, 2010 at 2:29 am

best price…affordable …
affordablewebdesignstudio co uk

affordablewebdesignstudio
Mar 9, 2010 at 2:29 am

latest design…web 2.0

lowest price..

affordablewebdesignstudio
Mar 9, 2010 at 2:30 am

alll small cmpny

design
Mar 9, 2010 at 2:31 am

templategang

design
Mar 9, 2010 at 2:32 am

templategang best price

social Bookmarking
Mar 9, 2010 at 7:17 am

What’s a Nice Looking menu….. Thanks

tamil movie
Mar 9, 2010 at 8:50 am

nice thanks for sharing

11EN1
Mar 10, 2010 at 8:44 am

Love it great thx!

Adrian
Mar 12, 2010 at 9:54 am

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
Mar 14, 2010 at 9:52 pm

What’s a Nice Looking menu….. ..Thanks

Korea_yuk
Mar 15, 2010 at 8:34 pm

very Good !!

ktown
Mar 16, 2010 at 11:10 pm

awesome tutorial.

ebsoft
Mar 17, 2010 at 1:15 am

nice tutorial…
thank you

Antallaktika
Dec 30, 2011 at 6:02 am

I love your menu and appreciate also that you have demo!

Template
Mar 18, 2010 at 11:15 am

Excellent tutorial..Thanks..

Zoe
Mar 18, 2010 at 11:40 am

Wow, such a great tutorial and it’s great to see such accessible, beautiful design – thanks!

Terry Reilly
Mar 18, 2010 at 4:46 pm

Thanks, for a great post. I have learned so much from this (and your site) about CSS.
Thanks Again

jek
Mar 19, 2010 at 1:15 am

can i download the source, thanks

Ryan
Mar 19, 2010 at 5:33 am

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
Mar 19, 2010 at 8:42 am

Excellent tutorial. I have learned so much from this about CSS.
Thanks, for a great post…

Hong DUc
Mar 21, 2010 at 8:12 am

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
Mar 21, 2010 at 8:38 am

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
Mar 22, 2010 at 11:58 pm

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
Mar 23, 2010 at 5:48 pm

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
Mar 24, 2010 at 7:20 am

Excellent post. Keep up the working and looking forward to more great articles in the future.

ijjal
Mar 28, 2010 at 10:29 pm

wow..i can try it now..thanks

Johan
Mar 31, 2010 at 1:54 pm

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
Apr 3, 2010 at 8:55 pm

This is very useful! Thank you!

ladybug
Apr 6, 2010 at 9:43 am

Thank you!
Very Excellent tutorial.

Jae Xavier
Apr 13, 2010 at 1:24 pm

Very helpful annotations there. Sometimes I get lost when I’m coding.

tasarhane
Apr 14, 2010 at 1:37 am

nice.. ill try it soon.. thanks.

jocelyn
Apr 14, 2010 at 10:46 am

Great works, i hope that microsoft will finally one day accept what other browser do natively

Thank’s again

Web Design Philippines
Apr 14, 2010 at 11:31 am

Thanks for the very great tutorial. Very informative and useful.

cowolco
Apr 14, 2010 at 2:29 pm

I really like this tutorial, thank you very much..

JimmyJam
Apr 14, 2010 at 6:07 pm

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
Apr 15, 2010 at 6:54 pm

Dosn’t work under IE6….but really good.

kvz
Apr 16, 2010 at 4:45 am

Fantastic work!!

Web Design Thessaloniki
Feb 19, 2012 at 10:48 am

Great post! I’ll try it to my site.
Thanks!

Web Design
Apr 22, 2010 at 2:34 pm

great stuff is came in handy for our last client thanks a bunch

kalamaras
Apr 23, 2010 at 1:53 pm

Dosn’t work in IE6

e-xronos.gr
Apr 23, 2010 at 1:54 pm

ill try it soon.. thanks

giorgos evagelou
Apr 23, 2010 at 1:55 pm

i just tested and it works! its amazing… thnx

MatheusMK3
Apr 23, 2010 at 9:28 pm

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
Apr 27, 2010 at 5:38 am

This is amazing, this is beautiful.
Thanks a lot !
Great job !

Web Design
Apr 28, 2010 at 9:29 pm

Great work gracias :)

Saiko_sama
Apr 29, 2010 at 2:55 am

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
May 1, 2010 at 2:11 am

Dosn’t work in IE7

charles rowland
May 4, 2010 at 12:27 pm

@ kalamaras, seriously… IE6… let it die already….

singgum3b
May 5, 2010 at 4:15 am

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
May 5, 2010 at 4:35 am

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
May 5, 2010 at 4:49 am

@ 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
May 5, 2010 at 10:42 am

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
May 12, 2010 at 7:09 pm

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
May 13, 2010 at 5:22 pm

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
May 28, 2010 at 3:06 am

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
May 28, 2010 at 3:53 pm

Excellent tutorial that I use on many sites.

Sivaranjan
Jun 1, 2010 at 1:13 pm

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
Jun 6, 2010 at 3:41 am

very good!

Sneha
Jun 9, 2010 at 1:27 am

its not working in the IE. pls help

Rod
Jun 9, 2010 at 8:12 am

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
Jun 13, 2010 at 3:27 am

Nice css dropdown menu, but what about adding a simple dropdown effect?

Okcoola
Jun 13, 2010 at 5:05 am

This is “CSS3” Dropdown Menu , IE7 does not support CSS3 very well.. upgraded to IE8+ ..

zacarias lavin
Jun 18, 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)

Kelly Johnson
Jun 18, 2010 at 10:28 am

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
Jun 21, 2010 at 3:58 am

wow, very interesting post… a little different to me… T^T

eFbé
Jun 21, 2010 at 6:00 am

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
Jun 22, 2010 at 3:17 am

love the design of your website!

jonathan
Jun 22, 2010 at 4:47 pm

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
Jun 24, 2010 at 4:07 pm

@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
Jun 26, 2010 at 12:26 pm

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
Jun 26, 2010 at 5:42 pm

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
Jul 2, 2010 at 10:05 am

your work is very nice zacariaslavin (I’ve seen in safari)

Progs4u
Jul 6, 2010 at 10:59 pm

Thank you so much ..
You are very cool

Cody Swann
Jul 7, 2010 at 10:43 am

Good stuff Nick.

Any chance you looked at performance differences with css3 gradients vs background image?

Web Guy
Jul 7, 2010 at 12:03 pm

love the design of your site. great css tutorial you ahve here.

Web Guy
Jul 7, 2010 at 12:05 pm

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
Jul 8, 2010 at 5:33 am

Nice article. Thanks for taking time to create this article.

Jacob
Jul 12, 2010 at 3:51 pm

Can someone explain what the “>” does in the css. Like on “li:hover > a”
Thanks.

paul s
Jul 13, 2010 at 8:43 am

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
Jul 13, 2010 at 10:10 pm

cool, i love it :)

Σχολή Οδηγών
Jul 15, 2010 at 2:41 am

nice post thnx!!

hanifu
Jul 16, 2010 at 2:07 am

WOW!!it‘s so cool!!

ndtechie05
Jul 19, 2010 at 10:10 am

how do you center the links? thanks.

will ceare
Jul 23, 2010 at 3:03 am

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
Jul 30, 2010 at 10:12 am

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
Aug 2, 2010 at 2:48 am

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
Aug 2, 2010 at 4:46 am

gooddddddddddddddddddddddddddd

Modifier
Aug 3, 2010 at 7:10 am

it’s realy good and usefull ;-)

EMR Software
Aug 4, 2010 at 12:42 am

Thanks for the post, it really helped me to solve the CSS Problem.

Chris CC
Aug 4, 2010 at 10:43 pm

Awesome tutorial….but where do go to download the source code?

Chris CC
Aug 4, 2010 at 10:43 pm

Where do i go to download the source code?

ricky
Aug 12, 2010 at 2:33 am

adding this line to eliminate border when you click the link

* {
outline: none;
-moz-outline-style:none;
}

azman
Aug 13, 2010 at 2:03 am

nice menu. i’ll try
thank you

CMMaung
Aug 16, 2010 at 12:15 am

very nice post! I appreciate it!

Lyplba
Aug 20, 2010 at 7:48 pm

instensitiy or intensity ?!

DuJing
Aug 21, 2010 at 11:19 pm

very good, very beautiful !

Leonard
Aug 23, 2010 at 6:59 am

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
Aug 25, 2010 at 7:07 pm

[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
Aug 31, 2010 at 3:43 am

Click the “view demo” link . After entering the demo page rightclick and page save as…

Chris
Sep 4, 2010 at 8:17 pm

These are all very nice but in Opera, the gradient image shows rectangular, not rounded!
Cheers

seolar
Sep 12, 2010 at 4:03 pm

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
Sep 14, 2010 at 10:40 pm

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
Sep 17, 2010 at 8:11 am

@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
Sep 22, 2010 at 3:00 am

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
Sep 22, 2010 at 3:01 am

Oops – my comment has dropped the html tags of ‘header’ and ‘nav’ within.

imtikhan
Sep 28, 2010 at 9:38 pm

thanks infonya

Melvins
Oct 1, 2010 at 5:24 am

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
Oct 4, 2010 at 10:22 am

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
Oct 7, 2010 at 5:08 pm

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
Oct 7, 2010 at 10:07 pm

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
Oct 9, 2010 at 3:35 am

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
Oct 9, 2010 at 4:10 am

myso

satya
Oct 25, 2010 at 1:36 am

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
Oct 25, 2010 at 9:19 pm

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
Oct 25, 2010 at 10:32 pm

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
Oct 27, 2010 at 3:49 am

fgfalert(“”)

sonnerie portable
Oct 27, 2010 at 8:59 am

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
Oct 31, 2010 at 9:34 pm

This bog is very beautiful so much that I can learn
thank you

yogesh
Nov 6, 2010 at 4:08 am

nice..tutorial

Hamed
Nov 8, 2010 at 3:46 am

Excellent tutorial..Thanks

Gpak
Nov 8, 2010 at 9:37 am

Thanks for the great job!!

spb
Nov 10, 2010 at 2:05 pm

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
Nov 11, 2010 at 9:22 pm

nice..
i like it..
thanks for your tutorials..

Franklin
Nov 16, 2010 at 10:21 am

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
Nov 18, 2010 at 7:55 am

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
Nov 23, 2010 at 9:11 am

waw, nice info. thanks to share

Bikram
Dec 3, 2010 at 8:17 am

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
Dec 3, 2010 at 9:49 am

Nice tutorial website
Very easy to learn
Straight forward
No extra bla-bla………..
GOOD

hmm
Dec 3, 2010 at 10:37 pm

menu doesnt work in IE 6 …. forget the rounded stuff .. atleast it should work normal

PiT
Dec 5, 2010 at 6:50 am

I have found an issue for IE7 :

#nav li:hover a
{
display:inline-block;
}

great tutorial website, thanks

krike
Dec 7, 2010 at 6:46 am

css3 rounded corners rules :D

Submitted on cms tutorial: http://cmstutorials.org/tutorial/detail/css3_dropdown_menu

iRvanFauziE
Dec 8, 2010 at 8:02 am

doesn’t work in IE6 :(

asdf
Dec 8, 2010 at 1:03 pm

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
Dec 10, 2010 at 3:22 pm

Nice pack of CSS3 menu techniques.

ron
Dec 12, 2010 at 8:46 am

I can’t manage to change direction of all thi menu to RtL

Walter Coots
Dec 13, 2010 at 7:12 pm

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
Dec 13, 2010 at 7:17 pm

Got it!
#nav ul li:hover { background:#cad5e9; }

John-Paul
Dec 14, 2010 at 11:29 am

This is a very nice tutorial.
Thanks

meem
Dec 15, 2010 at 4:59 pm

Hey how can I download the menu? I’m new at this and I would like to use it

joseph
Dec 15, 2010 at 10:45 pm

great tutorial but I need help on how can I make drop down menu in an image button please help thanks :)

Juno Mindoes
Dec 23, 2010 at 10:22 pm

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
Dec 24, 2010 at 6:51 am

Interesting post. Thanks for sharing.
Great post thanks for sharing a informative article keep it up

Henry Peise
Dec 24, 2010 at 9:47 pm

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
Dec 26, 2010 at 9:54 am

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
Dec 27, 2010 at 7:03 pm

This is great man. Thanks for the good work! SEO for Google

pandora
Dec 27, 2010 at 8:20 pm

I second Ulrich’s sentiment. It would be nice if the link that activated a submenu stayed highlighted.

best iphone cases
Dec 27, 2010 at 8:55 pm

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
Jan 1, 2011 at 1:58 pm

Great tutorial! Many many thanks!

pink lotion hair
Jan 3, 2011 at 9:49 pm

Wow, this was the mostinformative point I studied around my lifetime. Appreciate it.

Uçak Bileti
Jan 11, 2011 at 3:10 pm

türküsüüüüüü

Aileen Xie
Jan 12, 2011 at 2:29 am

That is awesome! But what is the browser is IE, no radius & shadow are supported?

Rayroger
Jan 15, 2011 at 7:37 am

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
Jan 19, 2011 at 3:47 am

that’s really nice,thank you,how can i download this code

HaCoz
Jan 26, 2011 at 3:54 am

Simple & Great!

Amelia
Jan 28, 2011 at 3:09 am

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
Jan 29, 2011 at 1:02 am

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
Jan 29, 2011 at 3:53 pm

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
Jan 31, 2011 at 4:38 pm

Outstanding work. Love the cross browser-ness of it! Even if IE does spoil the party a little.

Chuck Rowland
Jan 31, 2011 at 9:22 pm

Thanks, great information. I will be back to study some more. The cross browser element is well worth knowing.

R.D. Pullen
Feb 6, 2011 at 5:14 pm

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
Feb 10, 2011 at 10:17 pm

excellent work ty

Tomás
Feb 11, 2011 at 6:47 pm

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
Feb 13, 2011 at 3:01 pm

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
Feb 15, 2011 at 12:53 pm

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
Feb 15, 2011 at 6:09 pm

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
Feb 21, 2011 at 10:48 am

Thanks for the stuff, and I like some of the comments, it is really helping in my SEO Web Design freelance projects.

ant_g
Feb 25, 2011 at 6:18 am

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
Feb 26, 2011 at 9:54 pm

hey I would like to download it, would u be good to tell me how??

Krazy Chor
Feb 28, 2011 at 2:53 am

chori karvi e gunno 6……………………..
pan e mara mate nahiiiiiiiiiiiiiiii………(Exam ma)…………….:))))

รับทำเว็บไซต์
Feb 28, 2011 at 5:20 am

cool navigation-menus
thanks!You made some good points there.

shameer
Mar 3, 2011 at 3:07 am

Thank you for CSS menu tutorial……………..I like it

css splash
Mar 4, 2011 at 12:16 am

Looks Good! Css Splash | Web design Inspiration gallery

mark
Mar 4, 2011 at 7:49 pm

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
Mar 8, 2011 at 6:52 am

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
Mar 8, 2011 at 6:56 am

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
Mar 9, 2011 at 11:15 am

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
Mar 9, 2011 at 5:12 pm

Gradients don’t work in Opera. You should fall back to images for browsers that don’t support gradients.

Andrus
Mar 11, 2011 at 2:22 pm

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
Mar 17, 2011 at 5:16 pm

This article CSS3 Dropdown Menu is perfection. Thanks.

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:18 pm

A great instructional piece to learn plus a demo!!! An amazing way to learn indeed!

Bennett
Mar 18, 2011 at 10:24 am

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
Apr 11, 2011 at 7:51 am

You need to set the z-index of the menu so that it paints on top of the columns in your website.

Marcus Tucker
Mar 26, 2011 at 9:59 am

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
Apr 7, 2011 at 4:08 pm

Hey do this work in Dreamweaver CSS.

dexx
Apr 17, 2011 at 2:54 pm

age of heart attack decreased with each passing day, he said.

JWRIV
May 1, 2011 at 7:31 am

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
May 2, 2011 at 5:29 am

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
May 2, 2011 at 5:31 am

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
May 3, 2011 at 8:40 am

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
May 3, 2011 at 11:35 am

css drop down menu

Niyas Khan
May 4, 2011 at 4:58 am

Really helpful tutorial for creating nice dd menu…tnx

Salvatore
May 9, 2011 at 8:36 am

Thank you for this code.
How about using javascript for hiding menu on a click event ?

regards

Nick
May 11, 2011 at 4:06 pm

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
May 21, 2011 at 3:08 pm

ungrateful bastard.

miyijura
Jun 8, 2011 at 8:23 pm

You are a dumb.
Everything works fine by the way.

dont curse
Jun 10, 2011 at 3:41 am

not working in ie6

Andres Vaquero
Jun 10, 2011 at 3:54 am

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
May 12, 2011 at 11:43 pm

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
Jun 8, 2011 at 1:07 am

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
May 15, 2011 at 11:57 pm

Really helpful tutorial for creating nice dd menu…tnx…blogger jogja..

Mike
May 16, 2011 at 9:02 am

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
May 26, 2011 at 11:42 pm

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
May 16, 2011 at 9:25 am

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
May 26, 2011 at 1:22 pm

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
May 31, 2011 at 7:04 pm

Completely useless without the code for the body. Can’t figure out what is labeled , , etc… in the body

Christian
Jun 8, 2011 at 1:09 am

use an

Christian
Jun 8, 2011 at 1:10 am

oops…use an unordered list

Prabhu Chandian
Jun 2, 2011 at 3:21 am

Thanks for the post, this is really very helpful for me.

Prabhu
Drupal Designer

Christian
Jun 8, 2011 at 1:30 am

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
Jun 8, 2011 at 1:32 am

seems to be doing it on firefox

Julian
Jun 11, 2011 at 12:32 pm

Man, why don´t you share the download link? Now we all must search in the demo for the code..

Carlos
Jun 11, 2011 at 6:16 pm

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
Jun 15, 2011 at 11:08 am

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
Jun 15, 2011 at 7:37 pm

Wololol

Lau
Jun 16, 2011 at 12:17 am

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
Jun 18, 2011 at 10:38 am

hey nice site is it ok if i use this for my site?

na.Pro1
Jun 19, 2011 at 4:49 am

Thank for your share:)

DeskLancer
Jun 20, 2011 at 5:32 pm

not working with IE

web tasarım izmir
Jun 21, 2011 at 3:32 am

thanks for the nice post, I will visit your blog ,thanks for kind efforts and nice sharing

meds
Jun 24, 2011 at 10:25 am

Very nice button, like made with Photoshop. Thanks for tutorial

(aleb
Jun 26, 2011 at 10:18 pm

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
Jun 27, 2011 at 2:37 am

Really nice blog post, awesome in fact! :D

waqar khan
Jun 30, 2011 at 2:12 am

i want to creat multi-column sub menu with images have you someone any idea on that

Haris
Jun 30, 2011 at 8:45 am

simply put the images behind the submenu lists and create a new css for images.

araz
Jun 30, 2011 at 7:46 pm

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
Jul 8, 2011 at 3:49 am

Thank you for that very interesting.

طراحی سایت
Jul 8, 2011 at 6:18 am

Thank you for writing this article. I really enjoyed it. Keep up the excellent work!

Seo Mauritius
Jul 10, 2011 at 3:28 am

Great menu and great tutorial totally awesome but browser compatibility with css3 still suck particularly in IE hope it will be fix

ankitesh
Jul 14, 2011 at 3:18 pm

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
Jul 15, 2011 at 4:41 pm

This is verry good

Arif Riyanto
Jul 18, 2011 at 3:37 pm

It’s cool gradient

Marius Swanepoel
Jul 22, 2011 at 12:44 pm

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
Jul 22, 2011 at 2:04 pm

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!

طراحی وب سایت
Jul 29, 2011 at 12:37 am

This is very nice !

zografos
Aug 9, 2011 at 11:39 am

Perfect creations Many gratz!!!

peterborough website designer
Aug 15, 2011 at 10:57 am

great thx for the post

Julian
Aug 16, 2011 at 3:29 pm

Hi,

can you make it fade in with jquery? That would be amazing. Please mal back!

Thanks,

Julian

dred
Aug 23, 2011 at 10:53 am

thank tips

complex41
Aug 23, 2011 at 12:20 pm

And then he handed you the thirty-five 45

RD Web Design
Aug 24, 2011 at 1:32 pm

This menu is lush, very apple website like but better, thanks.

xbox 360
Aug 25, 2011 at 11:18 pm

This is very goog

l
Sep 5, 2011 at 2:50 am

Hi,
Nice job. Ie9 does not like gradients and border-radius.

Atif Aslam
Sep 7, 2011 at 3:57 am

Love this drop down menu.

I will definitely use it on my website.

jingxiamnh
Sep 8, 2011 at 4:00 am

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
Sep 11, 2011 at 7:39 am

this is cool
ty

Nick
Sep 11, 2011 at 11:59 pm

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
Sep 12, 2011 at 3:32 pm

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
Sep 16, 2011 at 2:48 pm

I always find this website as best, when ever I faced designing regarding issues.
Thanks again.

Sheik MohaideenA
Sep 17, 2011 at 12:58 am

Its just amazing .. Very useful website for every designer

تور
Sep 17, 2011 at 4:54 am

Thank you for that very interesting.

کیش
Sep 17, 2011 at 2:55 pm

this site very nice tnx tnx

Roelof Wobben
Sep 18, 2011 at 11:08 am

Can you help me find this file img/gradient.png.
Then finally I can try to make this menu work for my new website.

ترکیه
Sep 18, 2011 at 1:35 pm

tnx for this post .very nice

Id
Sep 18, 2011 at 4:20 pm

tnx very goooooooood

miko
Sep 19, 2011 at 6:37 am

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
Sep 20, 2011 at 1:09 pm

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
Sep 21, 2011 at 6:19 am

Thanks you sooooo mush….you are to good. :)

Emrah
Sep 23, 2011 at 8:49 am

İ want to use this menu. How can i take th code and gif pictures?

Gradient
Sep 23, 2011 at 1:48 pm

hi thx… i am here http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png

Luke
Sep 26, 2011 at 7:15 am

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
Sep 26, 2011 at 7:26 am

…never mind, got it ;)

read the code, its all in front of you!

Bench
Sep 26, 2011 at 8:58 am

Thanks for making this tutorial very detailed. Great!

Lucas
Sep 27, 2011 at 10:11 pm

Hey, how I fix it on IE 6,7,8,9 don’t know what versions are with bugs

Paulo H.L
Sep 30, 2011 at 12:31 pm

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
Oct 5, 2011 at 5:01 pm

Awesome! Keep up the good work!

FloFi
Oct 11, 2011 at 9:22 pm

Does anyone know how I can change the .current class dynamically that it fit’s to >>current<< the page?

FloFi
Oct 11, 2011 at 9:56 pm

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
Oct 12, 2011 at 3:21 am

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
Oct 31, 2011 at 3:45 am

dd

riya
Nov 16, 2011 at 10:48 am

aa

minyatoor
Oct 15, 2011 at 10:32 am

half of a well designed website is for the way that menu navigation looks like, thanks

banty love style
Oct 18, 2011 at 3:40 am

best

Ingwie
Oct 18, 2011 at 5:01 pm

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
Oct 19, 2011 at 1:28 am

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

γραμματεας ονλινε
Feb 17, 2012 at 8:28 am

nice post and a wonderful blog! love this theme!

rfa
Oct 19, 2011 at 5:20 am

regaeg

Bohemier
Oct 20, 2011 at 1:23 pm

Great tutorial, thanks.
TIP: You can use SVG gradients to properly support rounded borders and IE…

asansör
Oct 26, 2011 at 8:13 am

excellent a jop.thank you it like.

Web Designer - Ray Creations
Nov 6, 2011 at 6:17 am

We too use CSS to design drop down menus, rather than use Javascript. Haven’t tried this menu, however, it looks great.

shivam shukla
Nov 11, 2011 at 9:43 pm

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
Nov 12, 2011 at 9:25 am

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
Nov 15, 2011 at 3:36 pm

Very nice drop down menu with pure css.

Dr Saygın
Nov 18, 2011 at 8:30 am

thanks…

alovilla
Nov 23, 2011 at 6:44 pm

nice menu. thank you.

fotovoltaika
Nov 28, 2011 at 8:00 am

I love your design and the menu of course is great!

Selma
Nov 29, 2011 at 7:51 am

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
Nov 29, 2011 at 3:07 pm

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
Dec 7, 2011 at 6:41 am

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
Dec 7, 2011 at 6:46 am

… then click (or right-click) on the ‘style.css’ link.

Alexis
Dec 6, 2011 at 9:38 am

Not found in ipad.

:-/ any ideas?

tranks

maneeOS
Dec 7, 2011 at 12:12 pm

this is really nice … i wish you provide more CSS3 TUT’s if you can … really nice

Retina
Dec 8, 2011 at 2:39 am

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
Dec 10, 2011 at 3:28 am

What Script Code for Blog?

centrifuge in india
Dec 14, 2011 at 7:22 am

what is the size of this script ?

Pat
Dec 16, 2011 at 1:45 pm

This is a great use of CSS3. The tutorial is easy to follow.

Javi
Dec 18, 2011 at 3:59 pm

Doesnt run in my code the dropdown, whats happening?

thanks in advance

david
Dec 18, 2011 at 10:57 pm

css3 is more and more useful . hope ie series can support it like ff and chrome do one day.

Sean
Dec 23, 2011 at 6:16 pm

Thank you.

Marc
Dec 24, 2011 at 1:52 pm

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
Dec 26, 2011 at 8:55 am

ghghghghghgh

pezhman
Dec 27, 2011 at 4:34 pm

thank you its very beautiful

pezhman
Dec 27, 2011 at 4:36 pm

how can i chane it to rtl direction for persian language?

ali
Dec 28, 2011 at 1:35 am

hi thank very well, but how change menu to show sub menu right to left for arabic language

Lycan
Jan 1, 2012 at 4:28 am

just do this….
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}

LibertyBloggers
Jan 1, 2012 at 10:40 am

Thanx a lot buddy, U saved my life.

Kevin
Jan 5, 2012 at 5:37 pm

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
Jan 7, 2012 at 11:51 am

When we click on the (as a example) ” About”. Is it appear like ” Home” (active) with styles?

Tuomas
Jan 12, 2012 at 12:43 pm

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
Jan 12, 2012 at 1:55 pm

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
Jan 12, 2012 at 2:16 pm

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
Jan 12, 2012 at 3:36 pm

Next time I’ll read all of the posts before making suggestions… I found the same exact ones on earlier posts… carry on!

Manoj
Jan 13, 2012 at 5:51 am

not working in IE6 not so good………..

man van
Jan 14, 2012 at 1:59 pm

it also did not work on my site

removals
Jan 14, 2012 at 1:51 pm

it did work with my site ……….

Andre
Jan 14, 2012 at 2:07 pm

it did not work on ie6 too

van moves
Jan 14, 2012 at 2:15 pm

great menu and but it does not work with older browsers

Blogger Templates
Jan 17, 2012 at 9:20 am

Very helpful tutorial.

Ammar @ Free Premium Themes
Jan 18, 2012 at 3:54 am

Thanks for sharing this menu. But where is CSS and HTMl code?

Karl
Feb 15, 2012 at 10:57 am

check the source of the demo

Idham
Feb 21, 2012 at 1:15 am

Nice, thanks for source :)

karthimx
Jan 21, 2012 at 1:12 pm

Nice tutorial for drop down menu, used on my site. works great.

hi
Jan 28, 2012 at 11:39 am

thanks brother many many thanks

Ganesh kumar g
Jan 30, 2012 at 11:00 pm

Where is the html and css code ? that image ? need to write, right ? :-) lazy …:-)

Matt
Feb 6, 2012 at 5:21 pm

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
Feb 2, 2012 at 4:01 pm

Well done… thanks

Max
Feb 3, 2012 at 9:57 am

Thanks for explanation!

Hammad Baig
Feb 4, 2012 at 8:35 am

thanks for the share css3 dropdown menu

Bryan
Feb 9, 2012 at 11:54 pm

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
Feb 10, 2012 at 11:36 am

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
Feb 11, 2012 at 3:23 am

mantap bener postinganya bang, ijin nyimak dulu, ahahhahayyy

Blogger Templates
Feb 13, 2012 at 12:36 pm

Really helpful. I was looking for a solution to design pure CSS based navigation menu.

Nano
Feb 14, 2012 at 9:04 am

Thanks! I have a problem with the navigation in IE 8.

paman doblang bersabda
Feb 17, 2012 at 3:56 am

awesome
you help the blind
nice work

idham
Feb 19, 2012 at 9:23 pm

Awesome, thanks for tutorial.

Jenny
Feb 20, 2012 at 12:34 pm

That is CLEAN!

Manish Gupta
Feb 21, 2012 at 10:05 am

Thank you !!! Very nice work , you save my lots of time..

Elaine
Feb 29, 2012 at 6:16 pm

Fantastic! Thanks.

7ooof.net
Mar 2, 2012 at 4:46 pm

nice tnanks

Charan
Mar 6, 2012 at 11:19 pm

Hi,
Very Nice Tutorial I had used this in many of my websites and all your tutorials are great.

mark
Mar 7, 2012 at 5:13 pm

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
Apr 5, 2012 at 1:53 am

ddddd

s
Apr 5, 2012 at 1:55 am

kkkkk

s
Apr 5, 2012 at 1:56 am

hhhh

s
Apr 25, 2012 at 11:57 am

你好啊

kashif
May 6, 2012 at 1:34 am

in #nav ul

top: 35px;

gives the space.

Alex Fernandez
Mar 14, 2012 at 2:45 am

It did not work!!

zahra
Mar 14, 2012 at 10:01 am

aaaa

Tadej
Mar 15, 2012 at 3:42 am

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
Mar 15, 2012 at 5:11 am

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
Mar 19, 2012 at 8:15 pm

Thanks for making this tutorial very detailed. Great!

dhoni
Apr 9, 2012 at 4:00 am

great artikel….
i have a website look great….

thanks for your artikel

MacDemo
Apr 9, 2012 at 11:52 am

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
Apr 13, 2012 at 6:29 pm

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
Apr 17, 2012 at 11:49 am

nice solution with the gradient effect by shifting the background image
thanks

Cuong
Apr 25, 2012 at 1:56 am

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
Apr 25, 2012 at 1:56 am

*when

Cuong
Apr 25, 2012 at 2:32 am

problem solved, i used z-index property to make drop down menu on top of div elemnt

denish patel
Apr 27, 2012 at 10:46 am

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
Apr 28, 2012 at 7:04 am

Fantastic tutorial, very Pro…
Thank you.

Tony
Apr 30, 2012 at 7:41 pm

Thank u :)

sunita
May 2, 2012 at 3:27 am

Thanks for tutorials

me
May 5, 2012 at 12:15 am

Is there sample code (.zip or similar)?

Ricardo
May 5, 2012 at 7:30 pm

I would like to test, but I did not find the source to donwnload. Is there a source ?

viom jeet
May 8, 2012 at 6:28 am

Border-radius is not working on IE.. on Win7

What to do..

aris
May 14, 2012 at 6:50 am

made after its drop down menu, how to install the blog, please help

latif
May 16, 2012 at 9:20 pm

its working :)

wordperfect
May 29, 2012 at 4:36 am

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
Jun 6, 2012 at 3:24 am

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
Jun 6, 2012 at 5:36 am

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
Jun 11, 2012 at 9:05 pm

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
Jun 6, 2012 at 5:27 am

Thanks for the tutorial! I found it very useful.

Billa
Jun 9, 2012 at 6:46 am

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
Jun 11, 2012 at 8:21 am

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
Jun 12, 2012 at 10:55 am

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
Jun 15, 2012 at 2:44 am

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
Jun 18, 2012 at 11:47 am

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
Jun 19, 2012 at 6:19 am

yaar download krne k liye to do…………………kewal demo de rhe ho

jitesh
Jul 30, 2012 at 11:50 am

@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
Jun 21, 2012 at 11:51 am

Hello!
Nice job!
but in Firefox 13.0.1 something goes wrong with border-radius…

Ian Haney
Jun 28, 2012 at 8:18 am

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
Jul 3, 2012 at 2:15 pm

I will try on my blog.
Thanks for tips.

Makro Web Dizayn
Jul 4, 2012 at 4:41 pm

Blue color perfect.Thanks for sharing.

John
Jul 16, 2012 at 12:04 pm

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
Jul 20, 2012 at 5:53 am

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
Aug 3, 2012 at 11:12 am

cool dropdown menu, I like it…
thanks…

kuku
Aug 7, 2012 at 6:54 am

Filitre Yapımı: http://play.kendincos.com/163368/Whldhtxptjn-filitre-yapimi.html

michael
Aug 9, 2012 at 2:31 pm

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
Aug 11, 2012 at 11:48 pm

This worked well thanks!

Alquiler yates Ibiza
Aug 12, 2012 at 9:31 am

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
Sep 25, 2012 at 2:24 am

Its not working

Naman Gupta
Aug 16, 2012 at 8:30 am

how to change color of the drop down menu

lakshmikanth vallampati
Aug 23, 2012 at 6:21 am

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
Aug 29, 2012 at 1:54 am

I think this article is not finished,the menu of the second and the third levers should be given the position.

Atul
Aug 30, 2012 at 12:05 pm

It is an awesome work !!

Esin
Sep 1, 2012 at 6:33 am

Thank you for this method.

Digital Dreams
Sep 1, 2012 at 8:28 am

awsome menu bar.I want more

tegatti
Sep 2, 2012 at 1:38 pm

Please, can someone help me how to find the css source?

Thanks in advance.

sarvesh
Sep 4, 2012 at 2:40 am

thanks for navigation bar example, its really very used for me

Muhammad Ateeq
Sep 5, 2012 at 4:29 am

ahan nice love it <3

himu
Sep 6, 2012 at 4:14 am

Thanks for the post.
I am using this menu in one of my project. It just work fine.

Alquiler yates Ibiza
Sep 6, 2012 at 12:05 pm

Please, can someone help me how to find the css source?

annie
Sep 7, 2012 at 3:09 am

bagaimana cara masukin css di c# ?
agak bingung sedikit …

thanks in advance

David
Sep 19, 2012 at 1:42 pm

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
Sep 20, 2012 at 10:38 am

dasdasd

Credit Card Transaction
Sep 22, 2012 at 12:26 pm

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
Nov 14, 2012 at 11:48 am

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
Nov 14, 2012 at 12:39 pm

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
Nov 19, 2012 at 9:35 am

Wow ! Great Man ! Thanks :)

Bearko
Nov 20, 2012 at 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.

ayan
Nov 23, 2012 at 2:39 pm

thanks really nice work….

kamal
Nov 25, 2012 at 2:06 pm

like this side

Ilija
Dec 4, 2012 at 7:32 pm

Great! Thanks, this is very flexibile and simply menu!

AJO
Jan 29, 2013 at 9:07 am

Hi there a very nice tutorial. Keep it up dude

diwakar
Feb 2, 2013 at 3:05 am

if it is free then why you are not provide gradiant.png

Ankit
May 27, 2013 at 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?

DymoLabels
Jun 1, 2013 at 3:44 am

hi sir
i really like CSS3 because CSS3 is batter than CSS2
keep it up
thanks for sharing

MARCOS
Feb 1, 2017 at 2:54 pm

MUY BUENO

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.