CSS3 dropdown menu

by - 328 comments

While this is still an up-to-date version, I just wanted to let you know I made also an improved and animated version of this CSS3 menu.

Today you’ll learn how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made:


If you’re in a hurry, here’s the result:

View demo

HTML structure

As you can see in the following lines, the HTML structure does not contain more than we need, it’s a minimal one and easy to understand.

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li>
		<a href="#">Categories</a>
		<ul>
			<li><a href="#">CSS</a></li>
			<li><a href="#">Graphic design</a></li>
			<li><a href="#">Development tools</a></li>
			<li><a href="#">Web design</a></li>
		</ul>
	</li>
	<li><a href="#">Work</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

One more thing, also very important, this is semantic HTML. It’s a logical structure and has a correct meaning, even if styling is totally missing at this point:


Clean and accessible HTML structure

In my example, the “Categories” section is the only one who contains a sub-list, but you can easy add sub-lists to any item.

The CSS

/* Main */
#menu{
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;  
	background: #111;
	background: -moz-linear-gradient(#444, #111); 
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));	
	background: -webkit-linear-gradient(#444, #111);	
	background: -o-linear-gradient(#444, #111);
	background: -ms-linear-gradient(#444, #111);
	background: linear-gradient(#444, #111);
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
}

#menu a{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
	color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
	color: #fafafa;
}

#menu li:hover > ul{
	display: block;
}

/* Sub-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */   
	height: 10px;
	width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */    
	height: 10px;
	width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Quite long list, huh? This is it…

CSS shape

You may have noticed the triangle shape that appears along with the sub-menu. That’s a CSS shape and its purpose is to increase usability for this CSS3 menu.

It’s made using the :after pseudo-element:

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec; 
}

Taming the IE6 “beast”

The sub-menu is displayed when hovering on a li element. As you already know, IE6 doesn’t support hovering on a non-anchor element.

Although, at the beginning of this article I said “without any Javascript”, in order maintain accessibility also for IE6, please allow me to add some scripting code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
	$(function() {
	  if ($.browser.msie && $.browser.version.substr(0,1)<7)
	  {
		$('li').has('ul').mouseover(function(){
			$(this).children('ul').show();
			}).mouseout(function(){
			$(this).children('ul').hide();
			})
	  }
	});        
</script>

You may skip that, as IE6 is going down. The final countdown began!

The above solution requires Jquery. Also, I think this shouldn't be a problem at all, while, nowadays Jquery is almost "a default" when talking about modern websites.

Target IE6 & IE7 browsers

Besides this Jquery fallback, the above CSS includes some lines specifically for IE6 and IE7:

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

There are also other IE hacks that won't pass CSS file validation... If you don't like it this way, just use conditional comments!

View demo

The end (of this article)

Hope you enjoyed this tutorial, don't forget to leave a comment!

Later edit

Just as I promised, the CSS3 dropdown menu is now a multi-level one. Please check the demo page to see the updated version:

Another update

I took advantage of some free time and I updated the CSS3 dropdown menu demo:

You might also like:

328 thoughts on “CSS3 dropdown menu”

      • Thank u man for this codes, I’m newbie in coding and I’m learning, one problem I have with drop down menu is when I click on sub menu of drop menu it’s appears down of what I clicked, not at left as in your example. Can u help? (sry for my bad English)

        Reply ↓

        • Isoroku, you can send me an email with a link to your example (use the contact form). I think it will be easier this way to see the problem you encounter.

          Reply ↓

          • Hi Red, i have the same problem with my drop down menu…. the first-child is not appearing on the right , but down :( .. can you tell me how did you fix on Isoroku’s problem?

          • Btw thank’s for the code…. i was looking for smone to help me..and i founded you ! :)

          • Hi, I also have the same problem here, all of them go down instead of going to the right.

            Can you help me how to solve it ?

            thanks :D

      • Breathtaking! Absolutely brilliant indeed, both thumbs up!

        Plz note, that all my sub-menu-items (2nd, 3rd and 4th level) appear vertically aligned when I use the CSS displayed above. However if I copy the css from your demo-page then the sub-menu-items (3rd/4th level) appear correctly, i.e. to the right of the 2nd/3rd level.
        Since there are quite a few css-lines, I couldn’t spot the difference(s) in these two versions, but they must differ, as I didn’t change anything else.

        Reply ↓

      • Hi ,This is a nice menu.But only one thing is that it is not working in IE.As u mention after adding the script and jquery it also not working .I am using IE8.Please help me .Its Urgent.Thanks.

        Reply ↓

  4. Thank you. This is such clean beautiful code, it inspires me to try hand coding my first drop down menu. Also, the little arrow is very cool for increased useability.

    I also like that you include support for IE6; I may not like it, but poor people use it and need to use websites too. I will email back the URL of the site I implement it at!

    Reply ↓

  6. thanking you regarding this articles
    Please continue to send me this type of articles.
    I am always waiting for you..

    Reply ↓

  7. Looks really nice. I tried getting the submenus to fade in with some code i got somewhere else, couldnt get it to work though.

    -webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */

    I’m really bad at css, any good suggestions on how to achieve this functionality?

    Reply ↓

    • Thanks Anders!
      In order to achieve the effect you wish, you may try using opacity property instead of display:

      #menu ul 
{
  opacity: 0;
}

#menu li:hover > ul 
{
  opacity: 1;
  -webkit-transition: opacity 1s linear;
}

      For browsers like IE, don’t forget to add also a fallback.

      Reply ↓

  8. Wow, best menu ever, and the best part of it is, this works fine in older versions of IE like IE6 and IE7 also.

    May be this is happening because of jQuery but anyway, this is gr8!

    Thanks!

    Reply ↓

    • Thanks for reading it vitmel! I use IEtester for this because I find it very helpful.

      Alternatively, I also use a Virtual Machine that runs Windows XP with default IE6 installed :).

      Reply ↓

  16. Opera 11.10 supports linear gradient

    background-image: -o-linear-gradient(top, #444, #111);

    Thanks for great menu

    Reply ↓

  21. Hey Red,

    Great Tutorial!

    Thank you very much!

    Question, what browser’s is the CSS code compatible with? Would you happen to know on hand?

    Reply ↓

  22. Aaron, thanks.

    Regarding your question, this is a cross-browser solution using progressive enhancement.

    This menu, using the above Jquery lines, will work also on IE6.

    Reply ↓

  26. Hey, nice work with this, it’s come in extremely handy for a project I’m doing right now! Thanks.

    One question, I have a non-white background, but the menu seems to have a white background. Is there a way I can make this a different colour, so that it blends in with the background colour?

    Thanks!
    Shaun

    Reply ↓

    • Shaun, nice to hear you find this helpful.

      There is no white background for this menu, so you shouldn’t encounter any problems when implementing it.

      Reply ↓

  27. Thank you for the hack, I am Brazilian and I would love that you put a translator on your site, since agradesso ja!

    Reply ↓

  28. Hi its nice tutorial… i want the submenu to display only onclick of the main menu… how to do it with jquery…

    Reply ↓

    • @Gunasegar, I hope you have good reasons to do that. :)

      Technically, you’d need to remove the following CSS rule #menu li:hover > ul {display:block} and use the above jquery code with click instead mouseover event.

      This should work!

      Reply ↓

      • Yep i will try that…. am using this menu as a part of my topbar, where the submenu is not visible, hiding behind the top-bar… actually absolute position is notworking… any idea…

        Reply ↓

      • $(function() {
        $(“#menu li”).click(function toggle(){

        $(this).children(‘ul’).toggle();
        $(this).toggleClass(“active”);

        return false;
        });

        this jquery code is working…. and comment the
        #menu li:hover > ul
        {
        display: block;
        }
        this hover property…

        Now the problem is absolute position… i tried given the parent div position as relative but still i have the problem… any suggestions?

        Reply ↓

  29. I have a vertical menu on bottom left column . Can I change css3 menu to work as vertical . I also have another problem . I am using wysiwyg editor for existing left column menu but it does not recognise link to style sheet. I tried ref style in head of site and also in wysiwyg but does not work for either so I am using wysiwyg styles for now.

    Reply ↓

    • Gary, this menu can be easily transformed into a vertical one. You should just update some CSS lines like absolute positioning top and left coordinates. Also you should remove some floats in order to transform the menu into a vertical menu.

      Regarding your WYSIWYG editor, I’m afraid I can’t really help you.

      Good luck!

      Reply ↓

  30. hi!
    I modified the colours of the menu.in dreamweaver i see the modifiction but in a browser (chrome,firefox….) no.
    plz help me
    thanks :)

    Reply ↓

      • yeah, I just meant for the rounded corners…but i ended up using a hack to get the rounded corners…but the hack uses javascript, which I wanted to eliminate completely from the site

        but just needed to make sure the site is accessible with or without javascript enabled…if they don’t have it enabled, square corners is fine with me…

        good stuff anyway

        Reply ↓

    • rriver, I’m glad you found this useful!

      Regarding your request, didn’t tried it but I think you’d need some conditional JS (only for iOS). Then, using something like Jquery’s event.stopPropagation() you could detect when the user taps outside the menu and hide the sub menu.

      Reply ↓

    • Hi there,

      I have used your menu on my website (far from finished), and it looks great I think. Thanks. Only thing is that when the page loads in Safari the drop-down menu doesn’t work straight away (you have to click first to another page and then it works). In Firefox it works straight away. Any ideas?

      Reply ↓

  34. :) normally… i never stop to comment – but i saw that well, one, the stuff here is absolutely amazing, and two, you are one of the few people that actually respond to their users :D

    great job, i cant/couldnt believe that something this spectacular was possible!!!! x]

    Reply ↓

  37. Hello,

    Love the menu and plan to use it even with the bug i have. You might be able to solve the bug, i have a fix i dont like but might use.

    When going website link i attached to this comment. On products we have menu headers to specify a standard. It is just a plain “li” with out the “a” link as there isnt a page we plan to have for it. I lose the CSS up arrow shape on that drop down. I could put a “a” with a null so when clicked it doesnt go anywhere but i prefer the menu header not highlight like it does now as it doesnt represent a link.

    Is there any way to fix the arrow or am i going to have to use the “a” null method to get the arrow in place?

    Thanks,
    Justin

    Reply ↓

    • Justin, sorry for my late reply.

      You could use an alternative tag as a span (styled the same as the anchor except the highlighting you want to be removed).

      I hope this works for you!

      Reply ↓

  38. Hi, can you please explain to me why clearing the floated elements is necessary or perhaps why does the menu act the way it does (the background color does not take effect) when the clear fix is not applied?

    And how does this look like in tablets or mobile devices?
    Thanks. :)

    Reply ↓

  40. Hi, hehehehe, i just make it work now, but i really would like the code for the multilevel menu, thanks very much, it was very instructive, i learn too much
    thanks again

    Reply ↓

  43. Outstanding menu. Looks pretty and works like a champ. It’s capable of customization as between top level menus and submenus, which is just what I needed. I’m a CSS noob and found it easy to deploy. Much easier to use with dynamically generated links than other menus I found, because it does not require you to use special class or ID tags for each level.

    Thank you so much for designing this!

    Reply ↓

  47. Friend i’m a new blogger. I’m interested to implement your drop down menu bar in my blog ,but i don’t know how to enter the css code and how can i get the output in my blog. please explain for me, what are the steps i have to follow to obtain the menu bar in my blog. I have no technical knowledge. Please explain for me step by step procedure for implement the above css code technique. If possible, send it to my mail….Help me friend. I am waiting for your reply.

    Reply ↓

    • Nathan, technically, this menu is not hard to implement as you probably read. Basically you’d need just to copy/paste the HTML and CSS above.

      But, when it comes about implementing with a blog (which is a CMS), things can become a little tricky and you’d need to have some basic knowledge about web development.

      Good luck!

      Reply ↓

  55. Hey just wanted to say thanks that’s great work! Got a quick question whats the > for in #menu li:hover > a ?
    I’ve got a handle on basic css but I’ve never seen the > used before. Looking for some info or where I can learn about this.

    Keep up the great work!!

    Reply ↓

  56. It does’nt work on internet explorer….and when i make a css whit that code it doesn’t work, but if i implement in the index it works…why? i’m new….
    Thank you

    Reply ↓

  58. Thanks for the code. It’s great.
    So, I used your code and changed it a bit so I could use on my vertical menus.
    But, I was unable to make the Sub-Menu appear after the button. I want it on the right. But, it keeps appearing on the bottom. I guess it is something on the code that you used to make it appear on the bottom, because your dropdown menu is for horizontal menus. Can you help me?

    Reply ↓

    • Daniel, I’m happy to hear you are using my menu.

      To make it look better as a vertical menu, you may need to adjust the left and top properties for the #menu ul.

      Reply ↓

  59. Really good tutorial but cant get it to work correctly in ie7 or 8. changing z-index doesnt seem to help, think gradient or rounded corner hacks need adjusting? any ideas?

    thanks

    Reply ↓

  60. Hi, thanks for this wonderful tutorial

    if you have only one sub Menu Item, the round corner effect is only for the bottom corner.

    add this to you css and all corner will be rounded

    #menu li:first-child:last-child > a {
    @include border_radius(5px, 5px, 5px, 5px);
    }

    regards dino

    Reply ↓

  63. Hi again,

    I tried for running in IE9, but the submenus do not work. Only the top menu appears.

    In Firefox works fine.

    Can you help me?

    Reply ↓

      • I didn’t make any changes in the code…

        The only diference is :

        I put the css in a css file… the rest is the same… :(

        Reply ↓

  65. Hiya,

    Really liking your design.

    When I view the example it looks fine but when I create it mayself I dont get the rounded corner to the left of the menu.
    Any idea why?
    They are just straight.

    Thanks

    Reply ↓

  66. I have been able to manipulate the width of the sub menu. Is there a way to get the menu to align left and have the little triangle come underneath the link?

    Reply ↓

  68. hi and excuse me for my bad english
    How to put the text in the middle of the menu and not to the left completely

    thank you !

    Reply ↓

  70. Hi – great menu, thanks. Two questions:

    1) does your menu system support titles of different lengths, without having to assume a maximum menu title width?

    2) is there a way to always show when a menu item has a sub-menu? Currently, you only find that out when you mouse over the menu item.

    Thanks

    Reply ↓

    • Mike, I’m glad you like this menu.

      Also, regarding your questions:

      1. Not sure if I got it right but I’m not aware of any menu length problem. The only width set for this menu is for IE7 and below (for compatibility reasons).

      2. This menu does not support that. But, it can be added by simply using a CSS class for the main items that contain a sub-menu. That class can display an arrow or something similar. I didn’t made that initially because I thought it would be quite redundant as the sub-menu already has something like that .

      Reply ↓

    • Let me explain that. I can add an image, but then IE makes your menu and the rest of the page move right of that first image.

      Home
      About……….
      (followed by the rest of your code)

      Btw looks awesome as is in firefox and opera

      Reply ↓

      • opps html code lost there.

        table width=”950″ align=”left”
        tr img src=”images/slogo.png” alt=”" align=”center”
        /tr
        /table

        ul id=”menu”
        li a href=”index.html”>Home /a /li
        li a href=”about.html”>About /a /li……..

        there (without the greater than and less than)

        Reply ↓

  72. Hi,
    your menu is great….but when i tried to use it then i face some problem…
    i used this code for keep all web content in center place…

    …

    so can you please give me the css code of the menu sothat i can use the css “container” and can use the layer to place the menu in the right place?
    one more help please…
    i can’t understand where i put the extra code for IE 6/7…i tested this menu only working well in IE9
    if you can put the code in the css then i will be very grate full to you…

    please help me…i like your menu very much that way i am trying to use it…..
    waiting for your kind reply… :)

    Thanks
    oli

    Reply ↓

  74. Thank you very much for this! I’m teaching myself (by necessity as well as interest), and was looking for something that looks great, and that I could also understand! From a newbie point of view, the code is simple and elegant (as is the menu). A lot of tutorials I’ve seen have a whole lot of unnecessary divs and codey bits that I can’t seem to figure out what they do.

    Also, thanks for the IE workarounds – that has helped preserve my sanity.

    Thanks so much for sharing.

    Regards,
    Danni

    Reply ↓

  75. the menu is great for what I need. thank you. the only problem I’m having is getting the 2nd tier sub menus to display to the right. they are appearing below on both IE , firefox and Chrome.

    Reply ↓

    • Never mind. I’m such a dork.. forgot the java… thanks again for such an simplistic looking menu. No way I could have built this with my skill set. Glad there are still people out there like you..

      Reply ↓

  76. What do I need to change to make the menu look like the original. The demo is much more rounded and does not have the lines in between menu items. How can I add those back in? Thanks!

    Reply ↓

  77. Thank you Red, it is a great tutorial. However with “copy and paste” I found two problems there. (http://sg-dvr.blogspot.com/)
    1) 2nd level menu “Development tools” and “Web design” under “CATEGORIES” drop down properly but they are un-accessible when I try to move the cursor on them. I searched Internet and everybody says it is because of IE z-index issue. I tried to change z-index but it doesn’t work.
    2) The trasparent 2nd level menu overlaps with the 1st level menu at the 2nd row. When I try to access “CSSSSSS” under “CATEGORIES” the 1st level menu “ABOUT6″ below “CATEGORIES” is selected instead.
    Please help on these. Thank you.

    Reply ↓

    • I tested with Firefox. Everything is OK. Only IE8 has above problems. Even worse, those cool features are all gone in IE8. Since there are still quite a lot people using IE, could you please take a look and update your codes? Thank you!!!

      Reply ↓

    • Hey Tony, thanks for your comment.

      Regarding the problems you’ve found: I never thought this menu will have 2 rows, never. Also, it does not look good either. :)

      So, I’d recommend you to stick always to one row and you’ll not have any problems on IE8 and below.

      Cheers.

      Reply ↓

  79. Hello!
    I am a newbie in coding and I’m learning,i have some question for this menu.
    The one:
    I can not see the effect in IE6/IE7/IE8.But in FireFox I can see the result . I do not know why?

    Reply ↓

    • Hi, for IE6 there is a jQuery workaround. Check the short jQuery snippet above. There are no problems on other browsers, just check your code again. Good luck!

      Reply ↓

  80. Dear Red
    Thanks a lot for the above tutorial.
    Finally I found a working tutorial in the net and it is yours.
    For a beginner like me it is very important to have a “copy/paste/test/learn” type of tutorial.
    I copy pasted your tutorial material and also from the source code of your demo page and “Hola”- it came out great.
    Thereafter I jumped into the codes to see what has been put where and why.
    This facility of “copy/paste/test/learn” tutorial provided by you had encouraged me to take more interest.
    Many tutors would not even explain why he/she put a particular code in a certain but specific location. It is very frustrating to follow them even if they end up building great apps.
    Thanks again.

    Reply ↓

  81. when i add a scroll bar to the sub menu, i lose the little triangle pointer. I tried changing code around to make it appear but no luck..

    this is the code i added to the #menu ul

    overflow-y: auto;
    height:300px;
    width: 250px;

    Reply ↓

  82. also, how can i keep the main menu from changing size when i zoom in and zoom out? When i zoom IN, it bunches everything together. When i zoom OUT, it stretches the bar. I’d like it remain static, unchanging.

    Reply ↓

  84. 這實在是太神了！尤其是那個小三角形，這種 boarder 的活用，我這輩子也想不到吧！從這篇文章學到很多，萬分感謝！

    Thanks a lot!

    Reply ↓

  85. Hey Red,

    I’m having problems getting the menu to work in IE, I’ve looked over the code as well as the JQuery info several times and I was wondering what you would recommend?

    Cheers,

    Craig

    Reply ↓

    • Craig, for IE6, please check if your code contain the above jQuery code, including the library inclusion itself:

      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
      Reply ↓

  87. This menu is wonderful. I am having some issues though. I am building a site with many pages and I have the menus on each one. I’ve moved the CSS code to it’s own .css file. On each of my pages I have the JavaScript tags in place so it works with IE, but when I load the site in IE, hovering over the options doesn’t bring up the sub-menus, and the black background doesn’t show. The menu works in all other browsers.

    Any thoughts?
    Alexander

    Reply ↓

      • Thanks Red, but I found the issue. I was looking around and IIS 7 has some funny personality traits.

        I put this line of code on the top of my HTML page and just like that, IE works:

        Reply ↓

  88. I was having problems getting the drop down menu to work under IE9. Both the background color, and the drop menu would now show up. It killed a good 3 hours of my day. Then I remembered a problem I had before where all I needed to do was change the doctype to strict, so I did and voila! It’s works perfectly now (minus the gradient). I figured I would post this and maybe help the rest of the people battling with IE9. Thank you so much for sharing your code!

    Reply ↓

  90. Hello

    I’m 15 and I’m a newbie in webdesigning.

    Is there anyway I can center the ‘Home’ ‘Categories’ etc … in the grey rounded rectangle ?

    Thank you by the way, your menu is awesome and I’m going to use it.

    Reply ↓

    • Thank you. But can you please point the differences ? I mean, in the first code, you use float, and now you use display.

      By the way, is there a place I can put my code ?

      Reply ↓

  92. Hi!!!

    I have a problem when inserting the menu css code on my website, all other libraries stop working. could help make my website work properly?

    Reply ↓

  93. Using the same css I can just add a deeper level of submenus in the html?
    I tried to do so but it showed the level below the menu, not on the right side.
    Help here. Thanks. I really like how it looks.

    Reply ↓

    • Hey Frank, the menu already has three sub-levels. I would not recommend you adding one more.

      If you still want that, you will need to add some more ul rules.

      Reply ↓

  94. Hi Catalin

    Nice dropdown menus. Just what I am looking for.

    I was wondering how I can have a gap between the main menu and the dropdown. I have tried making top: 45px; in #menu ul This works fine, the dropdown comes down, but now I have problems fetching (hover over) the dropmenu when I move from main to the dropdown.

    Regards
    jonhard
    faroe islands

    Reply ↓

    • Thanks for your comment Jonhard.

      The fact is that you can’t add a gap there and still have the same functionality. Having no gap between list element trigger and the sub list is actually a trick that makes these CSS dropdowns possible. Hope that helps!

      Reply ↓

    • Christine, I’m not a Joomla expert, but I’m sure you will not have problems with implementing this dropdown menu.

      Basically, once you have a dropdown on Joomla, you just need to adapt these dropdown styles to fit.

      Reply ↓

  101. This drop down menu looks awesome, but it seems like 8 out of 10 times, when I move my mouse down to the submenu, it disappears. Any ideas?

    Reply ↓

    • Just noticed, it works as long as I hover the mouse over triangle when I move down to the submenu.

      If I hover the mouse over the gap between the hovered link and the submenu below it, the submenu disappears. How can I stop this from happening?

      Reply ↓

          • One last thing I’ve noticed though, in IE8, the bottom of the submenu is cut off right under the last child item, ignoring my padding. If I hover over the last child the submenu expands and follows my styling rules. Hmm…

  105. Hey Red Beautifully designed and implemented, i wish i had found this sooner.

    Just have a question wondering if you can point me in the right direction, i am using the updated multi dropdown with unlimited levels, i really need to be able to center the menubar on the page, any pointers on how i can do this please?

    Reply ↓

  109. i checked the demo and i love it.. but the prob is im new at css.. it’ll be appreciated if u tell us where and which sequence to put the code in!!! ’cause i have no idea how to apply it on my web!!! please!!!

    Reply ↓

  110. Hi Red, love the menu

    I am having one minor problem, for the submenu I am using the text is quite long but if i change the width from 130px (in #menu ul a) to auto it scews up.

    Is there a resolution to this?

    Reply ↓

  112. Hello,
    Thank you so much for your tutorial. However, I have yet to make it for my site.
    Can you tell me where to paste the code? :( because I’m an IT noob…

    Reply ↓

  114. Hello,

    I really like your menu. In my application, I want the top level li to stay highlighted after it’s selected, so you can see the last selected menu bar option. For example, if I have a menu bar with File, Edit, View, Help on it, and the user selects View, I want View to appear in white text after it is clicked. Then, if the user selects Edit, I want the Edit item to be white, and the View item to go back to the normal gray color.

    I tried to do this by assigning a class to each <a> that sets “color:#999″ or “color:#fafafa”, but it seems to be ignoring this, presumably because the style data set by the CSS you provided is superceding it. What is the best way to implement a color that shows the last visited option?

    Thanks!

    Reply ↓

    • Hi David,

      If I’m not wrong, I think you’re talking about adding styles to highlight the current page in your menu.

      To do that, in your HTML, just add a .current class to the current li or a and style it accordingly.

      Hope that helps!

      Reply ↓

  118. This is a great menu – except my issue was that when I adjusted the color of the main menu bar from black to blue, the new colors were not supported in IE, Chrome or Safari. The color change was only compatible with Firefox.

    Any thoughts? Did I miss something in the code?

    Reply ↓

  121. Hi,

    The gradient effect works on Firefox, but it only shows black on the latest IE. I haven’t changed any code or colour. Any idea what the problem might be?

    Thank you

    Reply ↓

    • Zayne, in case you’re using IE9, a fallback background will appear instead of gradient.

      If you try latest IE10 demo, you’ll see that CSS3 gradients are supported.

      Reply ↓

  122. that’s brilliant man. i am going to use this at my site.
    bro can you tell me how can i have different color for active link in menu?
    i tried “”menu li a.selected,menu li a:active,menu li .current,”" but i am not getting result.

    Reply ↓

  123. good tutorial, have basic background make fukturistic, Rosu i want to this style in one of my website, thank so much before…

    Reply ↓

  124. great tut this was exactly what I was looking for. Is there anyway to make the li’s adjust to the size of the text?

    Reply ↓

  125. Great job…
    I’ve started lessons on web design and development a few months now and i study very very much. Believe me , this is one of the greatest jobs i have seen so far.
    You are my mentor.
    ……………………………..
    Sorry for my (bad) English..
    ……………………………..

    Reply ↓

  126. Hello i think what you did is realy nice and good looking
    but i think it has one small problem: it is platform dependant.
    In fact i am using IE 9 (default navigator at work) and ur code doesnt work at all where as if i open it in FF it works like magic. How can we adapt this code for IE 9?
    Thank you a lot

    Reply ↓

  129. hi bro,
    i am glad with your menu creation with css, i have to try it but i have problem to show the sub-sub menu. can you help me, please!

    Reply ↓

  131. Great , this’s what I want . But , when the mouse over the drop-down options ,flashing phenomenon in IE6 .

    Reply ↓

      • I tried to replace the JS , problem solving…

        $(function(){
        $(“li”).hover(function(){
        if($(this).has(“ul”)){
        $(this).find(“>ul”).show();
        }
        },function(){
        $(this).find(“>ul”).hide();
        })
        })

        Reply ↓

  132. I LOVE this menu. But, I’m also not very experienced. I’m trying to add a space in between each menu item, instead of all of them being butted up right against each other on the horizontal bar. Is there a way to add a space between each menu item? I’ve tried adding this to all the li items, but it’s not working.
    float: left;
    margin-right: 14px;

    And then hopefully this will cause each menu item to have 4 rounded corners. Thank you!

    Reply ↓

  133. Great stuff, your praise is well deserved for making this code freely available.

    Concerning the complaints about the menu not working in IE: Check if there’s an HTML comment in front of your doctype declaration. If there is, the menu will work fine in all other browsers but the drop-downs will not appear in IE8.

    Very, very, very annoying browser bug, I’d say.

    Reply ↓

  134. Thanks a lot for sharing the code for such a gorgeous menu. However when i’m using it on my website, on hovering up the sub-menubar the color(blue, in your design) is displaying in Chrome but not in Firefox.

    P.S. I made sure that -moz-linear-gradient(DC143C, DC143C); was incluted at the right position.

    But when i simply run your code without any alterations. it DOES SHOW UP.. unable to understand thiz ‘PARTIAL’ behaviour of Firefox towards me :D :D
    Pls reply!!

    Reply ↓

    • Hey,

      just make sure you replace the Hex colors for all prefixed properties from here:

      background: -moz-linear-gradient(#04acec,  #0186ba);	
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec,  #0186ba);
background: -o-linear-gradient(#04acec,  #0186ba);
background: -ms-linear-gradient(#04acec,  #0186ba);
background: linear-gradient(#04acec,  #0186ba);
      Reply ↓

  136. Really cool one! Respect!

    Do you know if it is possible to place the submenus from right to left keeping dynamic width of the list items?
    I tried to change

    #menu ul ul { top: 0; left: 100%; }

    to

    #menu ul ul { top: 0; left: -100%; }

    but this doesn’t work the way I want.

    Reply ↓

  137. Hi – great menu, thanks.
    one question:
    in the (/* Clear floated elements */) part i cannot understand it, please i want more explanation

    Reply ↓

  138. It’s really nice. I liked it but problem is that, it doesn’t show the sub-menu. So. what can i do to solve it??

    Reply ↓

  139. Hi there,

    Awesome menu, i love it. I have changed the colour to red, it displays in firefox perfectly.. but wen i use it in IE8 it has a white background :-(

    Plz help.

    Once again, your work is awesome and much appreciated! :-)

    K

    Reply ↓

  140. Hi – I would like the arrow to point down on the sub-levels.
    Even when theres is no sublevels it would be cool to have the arrow to point down.

    One more thing – is it possible to keep the hover background after the menu-item has been clicked? Ex. I click “Contact” and the arrow will stay at the “Contact” item to show that you are on the contact page now?

    Thx! Great Menu.

    //Thomas

    Reply ↓

  142. Great navigation bar, howeover I’m running into a problem with it. I hope I can explain this problem correctly:

    I currently have the bar in place on a website and the last option on said bar’s dropdown’s child goes off the screen out of view instead of rebounding to the left, staying in view on the screen. Is there a way to make a child go left when it hits the side of the screen instead of going to the right?

    Thanks!

    Reply ↓

    • Hey,

      In this case, using only CSS, I think you could just override the styles for :last-child menu element and its submenu in order to make your dropdown expand to the left instead of right.

      Reply ↓

      • I dont see a last child element in the main menu area of the CSS and the last child elements in the submenu are border radius and shadow items. I have edited the border radius and no change is happened. Could I trouble your for a further explanation/example?

        thanks!

        Reply ↓

  144. I love your menu! But I can not figure out how to separate each Section (“Home” “Categories”…) with the shaded line 100% tall and background color, which changes on rollover (similar to apple.com navigation bar). Help!

    Reply ↓

  145. I *think* I figured it out, but any hint how to make main buttons to spread out evenly to fill entire bar from edge to edge and first and last cell to have their “rollover effect” (background color) with rounded corners?

    Annie.

    Reply ↓

  147. hello. This is a very popular drop down menu on all the Blogger/Blogspot info sites. I have a Blogger blog and when I added this, the sub-menus were not showing. I could see the very top of them but nothing else. It was as if the gadget was in a frame or something. I removed it from my site because of this, but of all the menus out there – THIS is the one I want. Is there something I need to do to allow this to work? I am not technical, so copy paste is the only way for me!

    Reply ↓

  149. Hi, it’s wonderful. I have a question that how can l control the speed of the drop menu disappear, I want to let the drop menu show some second when the cursor leave the main menu. I have no idea to that, please help me. thanks.

    Reply ↓

  151. Great menu. One issue though.
    Has anyone tried this with a single sub menu? The hover higlight is not rounded at the top.
    I assume that this is due to the fact the last item style is being used and its expecting an item above it.
    This issue is the same for all single item sub menus.

    Reply ↓

  152. Excellent post….

    Is there a way to display category list on-click rather than hover ?
    I tried changing css hover to Active i.e. from “#menu li:hover > ul{display: block;}” to
    “#menu li:ACTIVE > ul{display: block;}” but when I click and release the mouse sub-category list disappears.

    Please let me know if there is any solution CSS3 and JavaScript.

    Requirement : On clicking Category, category-sub list should be displayed and on moving out from category sub-list or on clicking any other Menu link, category sub-list should not be displayed…
    I tried to use java-script but no success as I am very new…

    Please suggest

    Reply ↓

  161. Hi,

    I used this menu on a website I am working on; http://www.weddingpages.nl but now, after using it… It doesn’t seem to work on the iphone and ipad. I can click on the menu, it expands, but nothing is clickable. It simply doesn’t work at all.
    Is there any solution for this ? I searched for a long time for a nice menu and thought I finally found it here ;)

    Reply ↓

  168. Many thanks for your tutorial. I am a beginner in PHP and I did not have problems to implement your codes. It’s very clear for understanding. Now OK in Google chrome but not yet in IE. See you soon.

    Reply ↓

  170. Forgive me if I skimmed over this issue in the billion comments posted…
    Is there a way to have the active tab stay a certain color?

    I know there are the hover tags…but what about after you click the link?

    Thanks

    Reply ↓

  172. Nice job, you saved me hours on my project! Am new to web development but have some basic skills in HTML and CSS but your article has encouraged me to take my skills to the highest level I could attain. I was wondering if you could mentor me a little. I love all the beautiful ideas from your presentations. Sometimes I spent hours replaying some tutorials without any successes but your was easy to follow and flexible to plugin my variables in achieving same effect. Well done pal! I’ll be following on every social media :).
    Thanks
    aboladebaba

    Reply ↓

  173. Hi Red….
    Im a newbie…really newbie..a mum trying to work from home..trying to fix my own site as cant afford a professional. I’m using Kompozer to make my site. I understand where to put the html but have no idea about this css. Can you please assist me?

    Reply ↓

  174. Thanks very nice work ,but i have problem

    This menu dont work in IE when a i use php suffix instead of html
    I dont now why.please help!
    In Chrome,mozila,safari ,opera works super

    Reply ↓

    • Already its ok
      Solution : my php code had include php file before doctype html
      If include php file move after doctype html css menu works good in IE10

      Reply ↓

  175. Would like to place the menu further down so as to allow for a header. How do I do this? I didn’t see the “top/left” anywhere so I am assuming that it is replaced with “float”?

    Reply ↓

  176. Hi,
    Very nice menu! But… alas, I encounter a problem that makes me wonder if it is appropriate to use your menu with the 960 grid, because the format of the menu vanishes a split second after each time I refreshed the code, to reveal an unformatted list instead.
    Best,
    Arnaud

    Reply ↓

  178. Been playing around with your script – very good. Question for you – is there anyway to present a sub menu as a column?

    I’ve got a large list to display and it’s spilling out of the usuable screen space so if I could have it display it in 2/3 columns then things would be OK. I know this can be done using CSS as I’ve seen some examples on the net but I’ve tried to get it to work with your script and it’s not playing – any ideas? (ideally i’d like to be able to have this only work on specific menu items, not globally across all of them)

    Reply ↓

  181. I tried to put a vertical line to separate the options:
    # menu li {
    float: left;
    border-right: 1px solid # 333;

    Now, I can not get this line has dimension less than the height of the menu.

    Reply ↓

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>