Step 2 – Menu Layout

We will start to remove the margin, padding, border and outline from all the elements of the menu. Then we will add a fixed width and height to the menu, rounded corners and the CSS3 gradients. To align the links horizontally we will float the lists to left. We also need to set the position to relative because we will need that to align the sub menus.

We will hide the sub menu temporarily to be easier to style the first level.

.menu ul { display: none; }

Step 3 – Menu Links

To style the menu links we will add some basic CSS properties like font, color, padding, etc. Then we will add a dark text shadow and a color transition to create a smooth effect when the color changes on hover state. To create the links separator add a border to the left and right and then we will remove the left border from the first link and the right border from the last link. For the hover state we will only change the text color.

Step 4 – Sub Menu

First let’s remove this line of code that we have added on the second step.

.menu ul { display: none; }

Now we will style the sub menu. We will start to position the sub menu 40px from the top and 0px from the left of the menu item and add bottom rounded corners. We will set the opacity to 0 and on hover state to 1 to create the fade in/out effect. For the slide down/up effect we need to set the list height to 0px when is hidden and to 36px on hover state.

Conclusion

We’ve successfully created this pure CSS3 dropdown menu. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.

Download Dropdown Menu

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

This is great, it’s one of the things I have to complete on a project over the next few days and it looks a lot easier to make look more sophisticated rather than the more basic dropdown menu I usually end up turning too! The icon’s especially help jazz the menu up further and make it look professional.

Thanks very much for this tutorial – I hope it’s going to be perfect for my project

Although your article is great, You should call it “almost CSS3″ dropdown menu. First and foremost, properties prefixed with ‘-webkit-‘, ‘-moz-‘ etc. are proprietary, mostly experimental (which among others mean they may be poorly implemented) and are not part of the CSS3. Secondly, some other properties, such as ‘linear-gradient’ are still in a draft phase and are not part of the standard at the moment.

I know it is nice to play with new features but it’s good, at least, to touch on the subject of standards, compatibility, graceful degradation and/or progressive enhancement.

You’re right but properties like -moz-something, -webkit-something etc. are not, and will not be part of the CSS3 specification. Calling them CSS3 is just a missunderstanding and may mislead people.

Get the latest Opera for example. Remove the “background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);” from the CSS as it is not part of the official CSS recommendation and someone who doesn’t know where to look for information on browser specific features will not find anything about ‘-o-linear-gradient()’ on w3.org.
Leave just the: background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
and see what happens.
It just doesn’t work. If you look at the w3.org, You’ll see that this feature is a part of some module. The module is then going to be a part of so called CSS3. The module itself is a ‘Working Draft”, which means it may still change significantly and is not official (something you called ‘official syntax’ is still not an official standard).
And when you look at official Opera docs, You’ll see that Opera doesn’t support w3 CSS ‘linear-gradient()’ property at all at the moment, which is obvious.
Such things as ‘-moz-something’, ‘-webkit-something’ are still kinda ‘hacks’ and although they are cool and let us experiment with features that will likely be implemented in future versions of CSS, they have nothing to do with web standards yet. They just remind me of browser wars and are another indication of inconsistency that is still present. Imagine there are dozens of browser engines and web browsers and each has its own ‘-xyz-some_property’ :) (xyz is used here as a placeholder for engine/browser name).

It introduces another level of mess. You have to remember that ‘-o-‘ stands for Opera. You can guess that ‘-ms-‘ has something to do with Microsoft. But you have to know that Chrome and Safari use WebKit and be careful not to write ‘-chrome-something’ or ‘-safari-something-‘ :) If there aren’t many web engines and/or web browsers and they don’t have hundreds of proprietary CSS features it’s easy, but…

I’m not saying your tutorial was bad or something. I liked it very much. I just think it’s good to let people know they should “dig deeper” into the subject before following something blindly.

I know what browser prefixes are and I know how they work :)
I agree with you that all this prefixes are a mess and would be great if all the browser could test this CSS3 properties with the same syntax. But also as you may know some CSS3 properties are very well implemented at this time like (border-radius, box-shadow). You also may know that if you use the official border-radius syntax it will work on all recent browsers (Webkit, moz….). I didn’t said that -xyz-soothing is the official syntax, I said that I include in all my code the prefixed properties and the official ones, and when the browser will adopt the official syntax it will use it and drop the prefixed one.
In my opinion this is CSS3, even if some browser don’t have it implemented so well it continues CSS3, like the beta jQuery versions steel being jQuery. Btw, more tutorials coming soon.

Nice, but why not to use .menu{display:inline-block} instead of a fixed width?
This way you haven’t to care about space, typography or mor list-items.
For centering it you’d just have to use text-align:center to the container of the menu…

Hi I’m trying to intergrate this into a site, I have added some extra sub-menus but when they drop down only half the background color is shown, and the rest has no background. I don’t think it is a z-index issue because you can still click and see the links. Do you have any idea what might cause it?

Thanks, this is an amazing piece of code that I have already had working in the past!

I have the sub menus working, one of my menu’s has two items with sub menus. the sub menus pop out fine, but when you try and navigate the sub sub menu, once you get to the second sub sub menu it switches.

When your in commercial, try to hover over to the bottom two items in that sub sub menu. but you can’t. once you reach the third one (which is in line with another menu) it switches to that menu.

OMG This totally saved me! !!!! I had been working on a drop down menu with another code for like 5 days straight!!!!! No lie. It would work in all browsers except IE (of course right?). Until I found this…just before I was about to give up and quit. This is EXCELLENT for beginners like me who have no idea what they’re doing. And the beauty of it is that it works in all browsers!! IE7-9 included!! Say whaaaaat?!!!! That’s unheard of!! Or at least from what I was running into in all my research. And TRUST, I’ve been doing research for 5 days.

To reiterate from Valeriu’s comments above, …If the drop down is falling behind other elements, just copy and paste this:

ul.menu { z-index: 9999; position: relative; }

at the end of the css code if you can’t figure out what to do with it. That’s what I did and it worked like a charm.

We were reviewing this css to use on a large .NET project and at the last minute we found an issue that we don’t know how to handle. Our doctype from visual studio includes the transitional//EN. Unfortunately i can’t remove the doctype declaration without requiring changes to a huge number of web service calls. When I add transitional//EN to any aspx pages and run IE the drop down menu no longer renders correctly. Can anyone help me with this?
Thanks in advance.

Still having the issue of, one of my menu’s has two items with sub menus. the sub menus pop out fine, but when you try and navigate the sub sub menu, once you get to the second sub sub menu it switches.

When your in residential, try to hover over to the bottom two items in that sub sub menu. but you can’t. once you reach the second one (which is in line with another menu) it switches to that menu.

Not sure how to fix this. Please can anyone help? Need to launch this site, and I don’t have to have to use another navigation bar.

I’ve found a work around, but it doesn’t really “fix” the menu, more so it just disables the effects for mobile devices.

Assuming you are working with the default WordPress theme, do these two steps:

1. Download and implement the script from this site:http://rafael.adm.br/css_browser_selector
– This will allow you to change the CSS for specific devices (very helpful in general, I use this on all my sites)

Really nice article. I’ve modified this quite nicely to have the “sub-menu” items appear on a background color that is the same as the link hover (green in you original code). However, since I’m still learning CSS, was wondering how I would modify the color of the a hover when on the sub-menu items. Any suggestions?

Regarding experimental properties – welcome to the web. There has never been a time where all the browsers met the spec, and when the spec wasn’t under revision – just the way it is. Use something like sass/compass to gracefully use extended features.

1) I’m trying to make every submenu single voice’ height less than the actual size without luck. Cannot understand where to put a differen height and why we need height:36px in .menu li:hover > ul li (if i change that value don’t have the expected result

The tutorial and example is just superb. Very clean and simple.
Where can I get the entire set of icons used in the example. The code has just three of them, but I would need the entire set. ( others that I tried downloading have a different green color that does not look as good as the icons in this example. Could you please pass a direct link ?

Great tutorial! I used it for my web design portfolio. I do have a quick question though. When you hover and the sub-menu shows up, for a split second, the items are layered on top of each other and then they separate one at a time. How do you make it so that they drop down at the same speed and at the same moment?

I have tested the menu on my iphone 5s and nook hd. if the menu is in the middle/bottom of the page when you tap the main menu, sub menu will open but the page jumps to the top and you miss the menus !!! what shall i do or wat is he hack ??
thanks

I have tested the menu on my iphone 5s and nook hd. if the menu is in the middle/bottom of the page when you tap the main menu, sub menu will open but the page jumps to the top and you miss the menus !!! what shall i do or wat is he hack ??
thanks