How to Create a CSS3 Dropdown Menu



Topic: CSS3
Difficulty: Beginner
Estimated Completion Time: 20 mins

In this tutorial we will code in pure CSS3 the Navigation Menu that you can find in Impressionist UI.

Step 1 – HTML Markup

We will create an unordered list with a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list.

<ul class="menu">

	<li><a href="#">My dashboard</a></li>
	<li><a href="#">Likes</a></li>
	<li><a href="#">Views</a>

			<li><a href="#" class="documents">Documents</a></li>
			<li><a href="#" class="messages">Messages</a></li>
			<li><a href="#" class="signout">Sign Out</a></li>

	<li><a href="#">Uploads</a></li>
	<li><a href="#">Videos</a></li>
	<li><a href="#">Documents</a></li>

</ul> <!-- end .menu -->

Step 1

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.

.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;

.menu {
	height: 40px;
	width: 505px;

	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;

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

.menu ul { display: none; }

Step 2

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.

.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;

	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;

	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover &gt; a { color: #8fde62; }

Step 3

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.

.menu ul {
	position: absolute;
	top: 40px;
	left: 0;

	opacity: 0;
	background: #1f2024;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;

.menu li:hover &gt; ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;

.menu li:hover &gt; ul li {
	height: 36px;
	overflow: visible;
	padding: 0;

We will set the width of the sub menu links to 100px. Instead of left and right borders we will add a bottom one and remove it from the last link.

.menu ul li a {
	width: 100px;
	padding: 4px 0 4px 40px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;

.menu ul li:last-child a { border: none; }

To finish it we only need to add an icon to each sub menu link. To do it we will create a custom class for each one and add a background image.

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Step 4


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


  1. Mrinal Apr 13, 3:27 pm

    Good one, it is easy to edit and update. I like this css3 dropdown menu.

  2. Simon Apr 13, 6:39 pm

    Are there any browsers that won’t be compatible?

    • Valeriu Apr 13, 7:31 pm

      It works on all major browsers, including IE 7+ (not tested on IE6), but of course some CSS3 features will be missing on older browsers (rounded corners, gradients, animations).

  3. NativeHacker Apr 14, 6:47 pm

    I like this tutorial and I do not care about IE7. This design uses a simple code but it is so beautiful

  4. Trevor Geene Apr 15, 3:16 am

    This is a great tutorial. Probably should have left out the CSS3 gradient since you labeled as beginner. But I very much like it.

  5. Hendriks Apr 16, 2:19 pm

    Nice tutorial and result! But what’s about support for browser font size increasement..? Wouldn’t it be better to use relative values like em instead of px? Regards.

    • Valeriu Apr 16, 2:35 pm

      Are you referring to em’s? In tutorials I prefer to use pixels, feel free to use what ever you want. Btw, if you are going to use it on font I recommend you to change all the pixel values to em’s.

  6. Wojciech Apr 16, 3:10 pm

    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.


    • Valeriu Apr 16, 4:25 pm

      Well, prefixed properties are experimental but at this time they are almost well implemented on recent browsers and all the css3 properties have also the official syntax.

      • Wojciech Fornal Apr 16, 9:00 pm

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

        Hope to see your next article soon :)


        • Valeriu Apr 16, 9:34 pm

          Hey Wojciech,

          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.

  7. Eliezer Apr 17, 3:33 am

    Awesomw! Just would like to get a little mor explanation about the code, for example I never have used this kind of code with the “>” character : menu li:hover > ul { opacity: 1; }

    • Valeriu Apr 17, 4:33 am

      Hi Eliezer, the “>” character is used to target only the direct children of the element.


      <div id=”container”>
      <ul class=”first”>
      <li> List Item
      <ul class=”second”>
      <li> Child </li>
      <li> List Item </li>

      #menu > ul { css here }

      This CSS will only target the first ul from the div, the one with the class of “first”, you can use this selector to target the first direct child of an element without using classes.

      PS: I’ve only used the first and second class to make you understand better.

  8. Sls Apr 17, 6:14 pm

    Where the icons used for the sub menu are from?

    • Valeriu Apr 17, 6:17 pm

      They are from Impressionist UI PSD. Download the source file to get them.

  9. Oakley Apr 23, 9:17 pm

    I’m a beginner web design and love this tutorial. I just have one question, how do I get the submenu for my other links other than just one?


    • Valeriu Apr 24, 1:26 am

      Create another unordered list inside of the second one and style it accordingly.

      • Oakley Apr 27, 5:48 am

        O, I just figured it out, I had my end in the wrong place. Do you mind if I use this code for my website?

  10. Jerry May 14, 8:31 pm

    One question: when I installed it, the dropdowns rendered behind an image below them. Any way to bring them “to the front,” as it were?

    • Valeriu May 16, 2:35 pm

      Add a z-indez to the { z-index: 9999; position: relative; }

  11. Emilio Cobos May 21, 4:45 pm

    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…

  12. Kj Jun 3, 12:35 am

    Love the nav bar you created!!

    Can you please tell me how to center the items in the fixed width… I can’t seem to justify them all the way across. Thanks

  13. drock8787 Jun 14, 2:47 am

    Awesome tutorial!!

    I am trying to add a 3rd level that displays horizontally. How do I change the CSS to do this?


  14. pijush Jun 15, 8:09 pm

    hi, i am new in css3. i like your style. but i am trying to create another sub menu under sub menu but i can’t properly. would you please help me?

  15. renwar Jun 28, 11:24 pm

    thanx its so cool but when i make it to joomla menu it wouldn’t show any transition?
    how can i make it?

  16. Kishan Jul 3, 2:49 pm

    Awesome, really simply awesome, great color combination, I really loved it, thanks for such a tut dude

  17. Dylan Sep 15, 7:56 am

    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!

  18. Ian Haney Sep 25, 1:37 pm

    Hi, I love this tutorial but just need bit of help, The drop down disappears behind a div below but how do I get it in front

    I tried adding the below to the .menu. ul but didn’t work as I saw the blow on a earlier comment

    z-index: 9999;
    position: relative;

    Any ideas, please help

  19. keryn gill Oct 3, 11:24 pm

    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.

    Not sure how to fix this.

  20. nisan Oct 7, 1:49 pm

    great menu. i liked the simplicity and the beauty.
    how can i make it work with left and right and tabs for accessability???

  21. Ivanka Nov 20, 2:56 am

    That was really nice explanation for CSS3 menu..liked it very much..thanks for sharing.

  22. Mokarram Nov 26, 8:55 am

    Awesome… Its really very helpful for a beginner. :)

  23. CW Dec 1, 11:52 pm

    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: { 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.

    Thank you sooooo much for this tutorial!!

  24. Danny Jan 10, 7:25 pm

    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.

  25. Pieter Schepens Jan 14, 10:47 pm

    Great tutorial!
    I was wondering: how can you make the dropdown menu appear when clicking on a link in the main menu, in stead of hovering it?

  26. Keryn Gill Jan 17, 9:15 pm

    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.

  27. Jeff Jan 19, 5:55 am

    So I have this menu in a div that is floating next to a logo and whenever I preview in Dreamweaver or in a browser, all I see is the div filled with gray. The menu is nowhere to be found.

    What is going on?

  28. Shulkran Jan 19, 6:04 pm


    First, thank you for this tutorial, it’s just awesome. I have just a few question for you.

    1°Is it possible to move the text in the menu in the middle of the page? If it is, how can I do that?
    2°If it is possible, I want to add banner just left to my first link, how can I do that?


  29. martin Jan 25, 11:09 pm

    It doesn´t work on iPhone/iPad :(

    Is there a way to make it works?

    • Keryn Gill Feb 5, 1:43 am

      I was having the same problem with it not working on iPhone/iPad.

      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:
      – This will allow you to change the CSS for specific devices (very helpful in general, I use this on all my sites)

      2. Add this bit of CSS into your style sheet:

      .mobile #access ul ul{
      display: none;
      .mobile #access ul li:hover > ul {
      display: block;

      • mbop Apr 2, 7:01 am

        This is a really cool menu. Thanks for posting it. But it does not work on safari browser. instead of the sub menu dropping vertically, they display horizontally. Anybody had a fix or that?

  30. Ali Arshad Shaikh Feb 10, 7:48 am

    I’m a CSS3 newbie, and was really keen to applying my learnings. I stumbled upon this tutorial, which is very nicely explained. This has surely enhanced my learning about CSS3.

    Keep the good work going !!

  31. Maximiliano Feb 28, 11:32 pm

    Amazing! very useful. use z-index:1; for “menu” to maintain on top

  32. MikeM Mar 2, 12:17 am

    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?

  33. MattF Mar 12, 8:46 am

    Great article – thanks for sharing!
    Below is a summary of “improvements” from above and my own.

    //Keep menu in front { z-index:9999; position:relative;}

    // Auto-size drop-down width
    .menu ul li a { display:inline-block; }

    // Fully hide sub-menu until hover (currently mouse triggers just below main menu)
    .menu ul li a { visibility:hidden; }
    .menu li:hover > ul { visibility:visible;}

    // Prevent text wrapping
    .menu ul li a { text-wrap:none; }

    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.

  34. mostwanted Mar 20, 1:41 pm

    can anyoane put this menu to my website if i send u the website via email please?

  35. tHE Queen Mar 23, 5:18 pm

    LOL 22 different sites have tried to teach me this. I’m going back to old school. I”m too old for this.

  36. george Mar 25, 5:57 pm

    Might seem noobish but how can i change the location of this. For everything else been using Top:/ Left:…px but cant find where to change this?

  37. WB Mar 26, 12:52 pm

    Thank you, you’re a God among men!

  38. Alberto Mar 28, 12:07 pm

    Two questions:

    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

    2) What about if i want the last submenu right to left?

    • Alberto Mar 28, 12:25 pm

      well, for #2 just found this solution:

      ul.last{right:0; float:right; left:auto;}
      and apply class “last” to last ul

      still wonderning about question #1

  39. shil Apr 7, 6:26 am


    I like CSS . .
    I will try this NOT working In my browser ..
    I am using chrome browser. ..

    my output hover to not open sub menu pl any one help. . . .

  40. mbop Apr 8, 8:28 pm

    How can you make this menu work in Safari. Sub-menus are dropping horizontally instead of vertically

  41. Mohammad Reza May 4, 5:42 pm

    Thanks alot for this simple and wonderful Menu.
    your website’s menu is great too! is it open source or something? :D

  42. Valery May 27, 9:02 am

    Does not work in IE10. How to fix it? :(

  43. Manish Jun 11, 2:53 am

    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 ?

    thanks, and again! Awesome tutorial!

  44. bohr Jun 13, 6:45 pm

    Thank you so much for the lesson

  45. Simon Jul 3, 11:46 pm

    great stuff, learnt alot about menus! I would like to know how I can center the menu in the middle of the page? I have been searching around, but no luck!

  46. Saara Jul 10, 3:49 pm

    You’re a lifesaver! This is probably the best tutorial I’ve ever seen. Thanks so much! xx

  47. Mohsen Jul 19, 4:54 pm

    I wrote this code to visual studio 2010

    i wrote the html to html page,
    and css code to style sheet,
    i wrote the link for css too, but i doesnt work,
    please help, whats the problem?

  48. Justin Aug 4, 5:51 pm

    Not sure if people are still having trouble centering the menu itself, but my solution was as follows:

    .menu { /*Find this class in the css file*/

    height: 40px;
    width: 70%; /*I changed this to a percentage of the page,*/
    margin-left:auto; /*Then added these two margin styles.*/

    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    This is not the best solution but I hate using absolute positioning when not necessary. Hope this helps.

    And thank you for posting this. It’s one of the better ones that i have found. Much appreciation. Keep up the good work.

  49. Sachindra Singh Aug 6, 12:55 pm

    Menu Layout not display at run time. i wrote this code in notepad++…

  50. Carlton Stith Aug 8, 3:41 am

    This tutorial was great and very easy to follow. Thanks!

  51. Mr. O'Neill Aug 14, 2:49 pm

    Valeriu Timbuc,

    I have implemented your coding on one of my sites, but I have come to find out that the drop down does not work on IE for windows phone 8. Any suggestions? Thank you.

  52. Tara Sep 7, 3:09 am

    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?

  53. matzone Oct 4, 7:53 pm

    I like this … how about make it responsive ?

  54. John Oct 5, 2:30 am

    Wouldn’t you want to use ‘id’ instead of ‘class’ for the list elements?

  55. Spencer Oct 18, 11:58 am

    Thanks for your sharing!
    I finally know how to create dropdown meun and you really solve my problem to do a webpage by these simple syntax

  56. aswanbi Jan 22, 7:52 am

    What to do if i want to change color of child list item remaining static whenever it is clicked or until it remains active?

  57. Taylor Feb 15, 5:59 am

    Great tutorial! I installed it well, but my website also has a slideshow (WowSlider) that ends up covering the submenu options. Is there a way to fix this?

  58. Zeegroo May 2, 11:42 pm

    Great job, works great, and even I don’t have experience with CSS3 I’ve been able to shape it for my own purposes

  59. sotb May 6, 2:11 pm

    What should I change to make drop up menu?

  60. sotb May 21, 10:30 am

    You have to remove z-index from the photos div or set z-index to div menu

    • kenneth May 21, 5:52 pm

      Hmm, i tried but nothing happen.. :(

      • Robert May 22, 5:19 pm

        a common mistake is to write a closing before starting with the sub-.
        –> The sub- has to be inside the list-item. See the provided html-markup.

  61. alitaba May 28, 1:50 pm

    hi there

    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 ??

  62. alitaba Jun 3, 3:36 pm

    second time !! anybody there ??
    hi there

    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 ??

Leave a Reply

* Minimum length: 20 characters