CSS3 animated dropdown menu

by - 220 comments

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

CSS3 animated dropdown menu

View demo

Here’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:

Remember the previous CSS3 dropdown menu? That menu is awesome, and thanks to you is the most popular tutorial around here (at this time).

Perhaps the best title for this article would have been: CSS3 dropdown menu – Revisited. The reason I’m saying that is because in this article you’ll learn how to create an animated CSS3 dropdown menu based on our previous example.

The HTML

The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:

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

The CSS

I revised and improved the styles in order to create this unique CSS3 animated dropdown menu. So, below you can find the commented pieces of styles:

Mini reset

Reset the default ul styles.

#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

Main level

The #menu is basically the main ul for this menu. CSS3 things like gradients, shadows and rounded corners help us to create the below:

CSS3 menu wrapper

#menu {
	width: 960px;
	margin: 60px auto;
	border: 1px solid #222;
	background-color: #111;
	background-image: linear-gradient(#444, #111);
	border-radius: 6px;
	box-shadow: 0 1px 1px #777;
}

Clear floats

Here is Nicolas Gallagher‘s clearing method I’ve been using lately:

#menu:before,
#menu:after {
	content: "";
	display: table;
}

#menu:after {
	clear: both;
}

#menu {
	zoom:1;
}

List elements

CSS3 menu elements styles

Please notice the #menu li:hover > a selector. This is perhaps the most important CSS trick for this CSS3 dropdown menu.

So, this is how this works: Select an “a” element that is child of a “li” ; the “li” element must be a descendant of the “#menu”. Read more here.

#menu li {
	float: left;
	border-right: 1px solid #222;
	box-shadow: 1px 0 0 #444;
	position: relative;
}

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

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

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

Submenus

With CSS3 transitons we can animate changes to CSS properties like margin or opacity. This is very cool and I’ve used this for animating the CSS3 sub-menus. The result is great if you ask me:

#menu ul {
	margin: 20px 0 0 0;
	_margin: 0; /*IE6 only*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 38px;
	left: 0;
	z-index: 1;    
	background: #444;	
	background: linear-gradient(#444, #111);
	box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
	border-radius: 3px;
	transition: all .2s ease-in-out;  
}

#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}

#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*IE6 only*/
	box-shadow: -1px 0 0 rgba(255,255,255,.3);		
}

#menu ul li {
	float: none;
	display: block;
	border: 0;
	_line-height: 0; /*IE6 only*/
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

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

#menu ul a {    
	padding: 10px;
	width: 130px;
	_height: 10px; /*IE6 only*/
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
}

#menu ul a:hover {
	background-color: #0186ba;
	background-image: linear-gradient(#04acec, #0186ba);
}

First and last list elements styles

#menu ul li:first-child > a {
	border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;	
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #3b3b3b;
}

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

#menu ul ul li:first-child a:hover:after {
	border-right-color: #0299d3; 
	border-bottom-color: transparent; 	
}

#menu ul li:last-child > a {
	border-radius: 0 0 3px 3px;
}

The jQuery

As you already get used to, IE6 gets some extra attention:

$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
	$('li').has('ul').mouseover(function(){
		$(this).children('ul').css('visibility','visible');
		}).mouseout(function(){
		$(this).children('ul').css('visibility','hidden');
		})
  }
});

While the :hover pseudo-class does not work for other elements than anchor, we just need to add this small jQuery snippet to fix it. It's pretty self-explanatory.

View demo

Update: Mobile navigation support

This is something I wished to do for a while and I finally made it. I just added support for mobile devices and fixed the navigation for iPad.

You know how much I love CSS only solutions, but this time we'll be using some jQuery to enhance this menu. To view the result, you can narrow your browser window or browse it with your smartphone.

The viewport meta tag

To maintain everything at the correct scale, the first thing added is the viewport meta tag:

<meta name="viewport" content="width=device-width">

Small HTML update

You need to wrap the above HTML structure using something like: <nav id="menu-wrap">. This will be our relative holder for the mobile navigation.

The jQuery add

After page loads, we'll add the #menu-trigger element which does exactly what you think: will trigger the mobile menu when it will be clicked. Further, in the CSS, you'll see that this element is displayed using CSS3 media queries.

Another thing here is the iPad device detection. As you can see below, we'll remove the fancy transition effect and stick to toggling display: none/block. This way, the functionality will be maintained also on the iPad.

/* Mobile */
$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');		
$("#menu-trigger").on("click", function(){
	$("#menu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#menu ul').addClass('no-transition');

The mobile CSS

Here, the CSS3 media queries do the trick. We'll add CSS rules to override the initial styles:

#menu-trigger { /* Hide it initially */
	display: none;
}

@media screen and (max-width: 600px) {

	#menu-wrap {
		position: relative;
	}

	#menu-wrap * {
		box-sizing: border-box;
	}

	#menu-trigger {
		display: block; /* Show it now */
		height: 40px;
		line-height: 40px;
		cursor: pointer;		
		padding: 0 0 0 35px;
		border: 1px solid #222;
		color: #fafafa;
		font-weight: bold;
		background-color: #111;
                /* Multiple backgrounds here, the first is base64 encoded */
		background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
		border-radius: 6px;
		box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	}

	#menu {
		margin: 0; padding: 10px;
		position: absolute;
		top: 40px;
		width: 100%;
		z-index: 1;
		display: none;
		box-shadow: none;		
	}

	#menu:after {
		content: '';
		position: absolute;
		left: 25px;
		top: -8px;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #444;
	}	

	#menu ul {
		position: static;
		visibility: visible;
		opacity: 1;
		margin: 0;
		background: none;
		box-shadow: none;				
	}

	#menu ul ul {
		margin: 0 0 0 20px !important;
		box-shadow: none;		
	}

	#menu li {
		position: static;
		display: block;
		float: none;
		border: 0;
		margin: 5px;
		box-shadow: none;			
	}

	#menu ul li{
		margin-left: 20px;
		box-shadow: none;		
	}

	#menu a{
		display: block;
		float: none;
		padding: 0;
		color: #999;
	}

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

	#menu ul a{
		padding: 0;
		width: auto;		
	}

	#menu ul a:hover{
		background: none;	
	}

	#menu ul li:first-child a:after,
	#menu ul ul li:first-child a:after {
		border: 0;
	}		

}

@media screen and (min-width: 600px) {
	#menu {
		display: block !important;
	}
}	

/* iPad */
.no-transition {
	transition: none;
	opacity: 1;
	visibility: visible;
	display: none;  		
}

#menu li:hover > .no-transition {
	display: block;
}

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

You might also like:

220 thoughts on “CSS3 animated dropdown menu”

  1. You know, you are some CSS genius! Everytime I see a yellow glow (indicating a new item on my feed) from red team design feed on my Google reader, I leave everything else to check it. You always make us look forward to something really cool. I’d be working on a project soon. If i stumble on any piece that seems to gimme issues, I sure know where to call. Thanks for sharing as always.

    Reply ↓

      • Hi,This is really a nice article.But only one problem is that the menus (sides) are not rounded in IE which is very urgent for me.As u mention ,after placing the jquery fun() the submenus are also not coming in IE as in other browsers.Kindly take a look at this issue and plz help me.Quick response is greately appreciated.Thanks

        Reply ↓

    • I’m a complete beginner when it comes to websites and I’m trying to learn by myself. I want to setup a basic site which I can easily access and see if there is any activity on my gameservers. I’m testing my idea by using the code mentioned here, but when it comes down to adding images, such as the ones showing my server for example, the size is ok using a pc, but using a cellphone the image is way bigger than the main menu.

      My question basicly is, how does one scale an image like the menu is scaled when accessing the site using a cellphone?

      See the site if you wish (to see what I mean.)
      http://drunkenmasters.se/left4dead2/

      Reply ↓

  2. thanks for the great post, red! i think the menu’s look great and and you’ve done a good job explaining it. the only thing i’m curious about: how are you placing the triangles around the first li element?

    i notice that they go away when i comment out the ‘#menu ul li:first-child > a:after’ rule in the css, but i can’t tell exactly how they’re being created.

    thanks again!

    Reply ↓

  3. This menu looks great! I really hope IE9 and IE10 will spread fast. Right now around 7% of our users still use IE8 or something older, but we’re in a design oriented business and on an average site this number can be more than 15%. The menu works well in IE8 but of course it’s missing all the little details that makes it stand out so all we can hope is that these outdated browsers die out soon… :)

    Reply ↓

    • Hi Peter, thanks for your comment .

      Of course, the “little details that makes it stand out” are missing for older browsers. But, I think the users who run on older browsers won’t feel the difference.

      The most important thing is that, while being wonderful on modern browsers, this menu works perfect also on older browsers like IE trident.

      Reply ↓

    • You can try this to at least show the whole submenu (first level anyway) on focus of the top-level anchor:

      #menu li:hover>ul, #menu a:focus+ul {
      opacity: 1;
      visibility: visible;
      margin: 0;
      }

      Unfortunately because opacity and visibility has been set on the ul and not the anchors, it’s not possible to undo the opacity of a parent while focussing on the child. For this reason I’m still a fan of the pull-offscreen negative margin technique, because you can also change the margins on the child anchors as well.

      But then this fade-in CSS3 technique won’t work. A way around this would probably be to leave pos:absolute on the sub uls but move the opacity and visibility settings to the anchors, so you can remove them on :focus.

      With this, you can get the child anchors to appear on focus (you won’t see their submenu siblings, but at least you’ll see the item itself).
      There’s an example of this menu (disable javascript to see just the CSS) at www motorrijschoolemo.nl tab through the menu. Turning Javascript back on, you see it assists in keeping the whole sub-ul onscreen as well (and helps IE6).

      You’d still need a touch of Javascript to keep the whole sub-ul to stay onscreen.

      Reply ↓

  5. Very cool menu. I was just wondering your thoughts on keyboard accessibility. As I tab through the demo I can’t find a way to get the drop down menus to come up. Maybe capturing the enter or arrow keys to expand, but I get that requires more JS. Maybe add :focus to everything with :hover?

    Reply ↓

  6. Yoan and Nathan, the :focus pseudo-class is not a solution in order to make this menu accessible via keyboard. I’m pretty sure that some JavaScript would be required to do that.

    I will think about a solution regarding this matter.

    Thanks for your suggestions. ;)

    Reply ↓

  7. I would think that access keys would provide keyboard accessibility in this situation — at least for the main links, right? For example…

    Home
    …

    Just a thought. Great post, and the menu is really tasty… nice job :)

    Reply ↓

      • So long as you find an accesskey that doesn’t conflict with a taken browser or other software key (why numbers are recommended, and even then you’ll hit some software), and then find a way to make it known to the user that the accesskeys exist (only Opera offers a method for all users to discover accesskeys).

        Reply ↓

  8. Very nice tutorial. Thank you so much for sharing. I’m just curious what purpose the empty “content:” properties in your code serve.

    Reply ↓

    • I found the explanation. The pseudo-element won’t work without the content property being declared…even if it’s empty. Great article…thanks again.

      Reply ↓

      • amidude, indeed, you need to specify the content for a pseudo-element, even if is empty.

        Thanks for your comment, I’m glad you like this article.

        Reply ↓

  13. Red, what do offer as a solution to a top-level menu item being positioned near the right of the viewport, and its contents being more than 2 levels deep? i.e. the submenus will display outside of the viewport.

    Reply ↓

    • Shaun, I’d say that is not a common behavior.

      At first sight, if I’d really want a menu right-aligned, I’d add just one level to it and then reorganize the other possible sub levels into a sidebar for example.

      I’m totally against complexity when it comes about menus, and to avoid eventually JavaScript viewport calculations, I’d choose the solution above.

      Reply ↓

    • What many people do is give the last main menu item a class like “last” or whatever, and instead of having the child menus sit to the left, they’re positioned to sit to the right. A right-flyout.

      However Red’s point is good: deeply-nested menus are a problem for plenty of people, and you probably want to organise your menu for best usability/accessibility to have really just one level submenu, not multiple levels. The deeper people need to move, esp with mice, the more likely they are to lose their :hover and inadvertently close their menu. Which gets frustrating.

      So try reorganisation first, but the “left” class technique is not uncommon.

      Reply ↓

      • Sigh, my dys-spatia showing again.

        Re-do:
        Instead of letting the child submenus sit to the *right*, they are positioned to the *left*. So they don’t go past the viewport width.

        Reply ↓

  17. I’m bookmarking this, because I’m being asked more and more to add a bit of animation to menus and I’ve been resisting Javascript.

    Two nitpicks:
    Setting the z-index on the #menu ul may still hurt anyone on IE6-7 where a relatively positioned element comes after the menu (the IE z-index bug, as explained at annevankesteren.nl/2005/06/z-index)
    so I’d put it on the menu itself, or the top-level li’s if you don’t want to position the menu. Z-index on the parent hits the subs too, but also overrides the next positioned element coming after the menu.

    Second: The zoom statement isn’t needed. You’re already hitting Haslayout with a width on this #menu so you’re already good.

    Keyboard accessibility is another point but I’ve already mentioned that in an earlier comment.

    Cheers

    Reply ↓

    • Stomme,

      regarding the z-index, the #menu ul is already absolute positioned and that’s why defining a z-index is recommended.

      Also, the zoom is added just for clearing floats purposes.

      Thanks for sharing your thoughts with us.

      Reply ↓

      • Hi Red,
        If you’re only adding a z-index because you’ve positioned an element, you can leave it out, since abso-po’d elements are naturally stacked higher than their rel-po’d or static siblings and ancestors.
        The reason people put z-index on there at all is because they worry about someone who might be coming after the menu, and want to be certain the submenus always stack above (since the elements after the menu are later in source, and might be positioned, this is a valid fear).

        So setting a good z-index on the submenus is usually a good idea, and it works on all other browsers.
        However IE6 and 7 can bite you in the butt, because of this known bug.
        If you know you won’t have any positioned elements coming after the menu anyway, you don’t have to worry.
        But try it: have a #menu, then after the menu have a #main page element, and set it to position: relative for kicks. Then see what IE6-7 do. It’s a very common complaint/problem on web development forums: my submenu is fine in all browsers except in IE it’s behind my page/Flash/whatever. (though Flash is a different issue).

        Re zoom: it doens’t contain floats at all. It never has.

        IE 6 and 7 have Haslayout though. One of the strange and unique properties of Haslayout is, a container who has “Layout” in the Trident engine will always *contain* floated children (instead of letting the floats hang out like the specs say it should, and the way all other browsers do it).
        www satzansatz.de/cssd/onhavinglayout.html

        Zoom is one property that gives someone “Layout”, so you can make a box contain its child-floats in IE6 and 7 by setting zoom:1 (or zoom: anything but of course we don’t want any zooming) on it. All other browsers (including IE8+) will ignore zoom.

        But, if you trigger Haslayout some other way, then zoom can be thrown out. You’ve set a width on this menu, and width is also a trigger. Lucky us. We get “Layout” on our #menu for free! Which is awesome here because we’ve got floated children.

        The :after stuff technically doesn’t clear anything either because this technique *contains* the floats (tables are required to enclose their children no matter what… including fake display-tables : )

        I admit setting display:table on the generated element is much less code than Tony Aslett’s “create an element and use it to clear and then try to make it invisible” clearfix. The :before section I recognise from Yahoo, though maybe that guy works for Yahoo. There was some weird edge case where also adding a :before element fixed something and it’s not much extra code.

        Still, they are nitpicks and not huge amounts of code, and the menu is still brilliant.

        Reply ↓

        • Sigh, even though I re-read before hitting post…

          Should have been:
          “Re zoom: it doens’t clear floats at all. It never has.”

          “Contain” is exactly what it does, for IE6-7. My bad.

          Reply ↓

        • @Stomme: “The :after stuff technically doesn’t clear anything either”.

          Yes, it does. Because that technique contains floats only in IE6/7. In other browsers, it does clear (hence why clearfix sucks [1] most of the time).

          Regarding the use of “:before”, it is to prevent collapsing margin (on first child) across the board [2].

          Like you, I noticed the use of a width *and* zoom on the menu, but this is because zoom comes from clearfix. It is part of the clearing method, it does not come from styling the layout.

          @Red: Stomme is right about z-index. But best practice is to create a stacking context at the lowest level – which is the menu. Also, I think authors should never ever use z-index values greater than 3 or 4 in tutorials as it makes people think that using huge number like this is the way to go; that it will prevent “something” from happening when in fact it will create more issues than it solves.

          To Stomme point, if you position the menu and give that element a z-index to create a stacking context, you’ll “beat” any positioned element coming after that menu in any browser (including IE6).

          You can check this page [3]. It lets you create different stacking contexts to see how z-index works.

          Anyway, you have created a very nice menu here. Let’s hope people will see this as a nice ‘exercise’ rather than something they *have to use*. Because imho these menus create usability issues for many users.

          (sorry for the plugs) :-(

          [1] http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/
          [2] http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
          [3] http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

          Reply ↓

          • Thierry Koblentz, wow! I’m glad you like this menu and thanks for your comment, I always appreciate your thoughts.

            I must admit that, usually, I choose to use higher values for z-index property thinking that this way I could prevent “bad things” happening when user will implement it in their projects.

  18. Great menu. Thanks a lot!

    Have a couple of questions:

    If I don’t want the rounded corners. Which css to take out. Tried taking out the moz-borders, but that didn’t do the trick.

    Also, I would like to have one menu item (with a language selection), far out right. Can you make a space in-between the last real menu item and a far right one?

    Reply ↓

    • Johnny, thanks for your comment.

      If you don’t want rounded corners, just remove all the following declarations:

      -moz-border-radius: ...;
-webkit-border-radius: ...;
 border-radius: ...;

      Regarding your second question, you need to set float:right for the last #menu li.

      Reply ↓

        • Hi again,

          Ok, the corners gone. Just can’t see how I’ll get that last li moved to the right. How do you set float:right for the last menu li, when all others are left

          Reply ↓

          • In HTML, you must add a last-menu-item ID to the last li just like that:

            <li id="last-menu-item"><a href="">Select language</a></li>

            Then, in the CSS file:

            #last-menu-item {
float: right;
}

            Hope that helps!

  20. First, I just wanted to say thank you for such an awesome menu! I’ve just started integrating it into my site and it’s beautiful!

    One question I had – on iPhone/iPad users can’t hover so I was wondering if there is a way to make the sub-menu appear on click (tap) of the main menu items?

    Thank you!

    Reply ↓

    • Thanks for your comment, Jason. I’m glad you like it!

      Regarding your question, indeed, with adding some JavaScript, you could use the click event instead the hover for this menu.

      Though, I wouldn’t recommend you that. Instead, you could try some CSS3 media queries to transform your menu into an accessible one.

      Reply ↓

      • Thank you so much for the reply! That helps!

        One other question that I’m not sure if you can help with. I have some Fusion Charts on my page and have to include the FusionCharts.js file (). However, when I do that, the menu stops working only in Safari – still works fine in other browsers. When I hover over a main menu item, the pull down menu doesn’t appear. Again, this only happens in Safari and as soon as I take out the script above, it works normally again.

        Is there something specific I should look for in the FusionCharts.js script that may help to make this issue go away?

        Thank you!
        Jason

        Reply ↓

        • Jason, I’m afraid I can’t help you with this. Anyway, it’s a little strange you have this problem only on Safari.

          All I can recommend you is to check your JavaScript for errors. If you’re using Firebug on Windows, then try: CTRL+SHIFT+J

          Good luck!

          Reply ↓

  21. Hi,
    thanks for this awesome menu. :)
    how can i remove the black bar? let me know please.
    waiting for your reply..
    thanks
    oli

    Reply ↓

  22. Hi, Red. Thanks for an awesome work. I’m upgrading my site to fit your menu but i have a problem with submenues. Lot’s of li elements have somereallylongnames and some left over text just doesn’t fit the box and goes over. Is there a way to adjust the width of all elements to be as wide as needed to fit the text inside?
    Thanks in advance!

    Reply ↓

    • Hi Leo, the thing is that you can’t make this dropdown menu fluid without JavaScript. So, the best way is to choose a width based on your longest menu item. Hope that helps!

      Reply ↓

      • Hi!
        “white-space: nowrap” removal helped (so, long items go as 2 lines) and yes, this way fixed width of a colums for all child elements is the best way to go without Javascript. And still, navigation looks awesome! Thanks for your post!!!

        Reply ↓

  25. Red,
    This is an amazing tutorial, thanks for sharing. I do have one question regarding a small issue.

    Do you have any suggestions how to apply the :first-child and :last-child effects when there is only a single item in the dropdown. It sems like only the :last-child CSS is being applied when the link is hovered over. When not hovering though, there is no issue.

    Reply ↓

    • Brandon, I’m glad you like this tutorial. Also, regarding your question, the solution is the :only-child pseudo-class selector.

      Use something like:

      #menu ul li:only-child a{
    /* declarations for single item in the dropdown */
}
      Reply ↓

  26. Love the menu but was confused on how to change the submenu hover color to tie it in with the look and feel of my web site.
    Thank you
    Lisa

    Reply ↓

      • Thank you for the help but what I’m noticing is that the color change on hover worked in IE but not in Google chrome. I also have an issue where if I set the element to a set width, the submenus aren’t as wide as they need to be. Also on my main menu the last menu element wraps to below the home button. I’m trying to align it to the width of the page. http://uschrome.com

        Reply ↓

  27. Hello,

    I really appreciate this menu.

    When your mouse reach the last submenu pixel, it happens an awkward shaking movement. I would like to remove this.

    Reply ↓

    • Hey Rod, the “shaking movement” you’re talking about is kinda side effect of using CSS3 transitions simultaneously for both opacity and positioning properties like top/bottom.

      If it were about a simple animated tooltip, things could be fixed using CSS3 pointer-events: none declaration. But, in this case, we need to keep the original behavior for the sublists that are forming the dropdown functionality.

      Though, in my opinion, this drawback isn’t quite noticeable and do not affect the result too much.

      Anyway, your point is good and it deserves further investigations. I’ll think about it. ;)

      Reply ↓

  29. Hi.
    My name is Jibran. I am trying to learn CSS. Very nice and detailed tutorial.
    I have created the menu but my tertiary items overlap the secondary list items and do not show up at the right as yours do. I have checked your css very thoroughly but could not find any difference. Please help me to find out what I am doing wrong.

    Reply ↓

  31. hi! lot of thank you! but a i have a questions! !! how I can delete or remove the last line of the last LI element ??

    Reply ↓

  32. Hi. I love the color and border scheme of this menu. I’m curious about making a single button with the same layout (small, like 10x30px) but have limited css knowledge. Any help would be appreciated.

    Reply ↓

  34. I am a css beginner so pardon me cuz my question must look stupid:

    In the submenu section, position:absolute is applied to #menu ul. how come the # menu ul li’s become stack over each other again? before this statement, they floated shoulder to shoulder. Could you please save me from pulling my hair? I’d appreciate it!

    Reply ↓

    • In the CSS file you have something like:

      #menu ul li {
        float: none;
        display: block;
}

      which stack the li’s.

      Hope that helps ;)

      Reply ↓

      • Thanks Red. But I’m afraid that’s not what I asked. Actually, I don’t have to set li’s display to block to have them sitting next to each other until there’s not enough room in a row. In the css under submenue section, I figured it must be the conbination of ul{position:absolute} and li{float:left; absolute:relative} that does the trick. If you try to remove the position statement from either ul or li, the li’s will float next to each other till they fill a line. I just don’t understand why it acts like that…let alone how to utilize this combination as a “feature” of css. Do you have any idea? Thanks again!

        Reply ↓

  35. hi ! thank you! i have a question! a like not the blue in a hover effects!?? were can i change the color ??

    Reply ↓

  37. hi! lot of thank you! it’s awesome.but i have a questions.i want to learn more things about css. so can you help me sir.

    Reply ↓

  38. this is really cool. But i tried to implement it inside and all my list items are not shown. I am new in CSS. I changed selector # to . as well but no luck so far. could you help?

    Reply ↓

    • finally I got it working, but i didn’t see submenu animation from bottom to top. only when mouse leaving the menu the fade animation kicks in. Any idea?

      Reply ↓

  40. This is a beautiful menu – THANK SO MUCH.
    One problem though – I can’t seem to get it working on IOS. The only way to make it work is to remove the transistions…

    Anyone able to throw some light on this and get it working for IOS?

    Reply ↓

    • Actually, I think you don’t need any download link because there are no images or other files to include in a possible .zip archive.

      Just save the HTML page! ;)

      Reply ↓

  43. finally I got the menus, but without animation. Also when i go down to 4th link (e.g according to your Demo) while i go down to
    Categories >
    Development Tools> => The menu disappears.
    before going to the next 4th link

    plz anyone help

    Reply ↓

  44. I for the life of me cannot figure out how to ‘center’ this menu, I have looked at the solution that you posted above and can’t see a difference in the css code that I already have – I’ve followed your suggestion and it is still left-aligned :( could you please help?

    Reply ↓

  45. Awesome work. But wondering under which license it’s created?? Is it free to use for all??? Want to build a Module for Joomla with it, but it’s commercial. What did you said about this? Is it MIT or GNU/GPL, CC or something else??

    Reply ↓

  46. Hi. I am a newbie when it comes to website designing. I tried to implement this tutorial in the designing of a website am working on but it doesnt seem to work and I don’t seem to know the problem. If you pleas send to my mail step by step procedure in thi stutorial and where I have to put what i would be very grateful.

    Reply ↓

  47. The way that you have it styled, the 1st child ul overlaps the main navigation, which allows users in IE to access the drop down list. What I am looking to do is allow for a gap between the two, but despite all my efforts, I cannot get this to work in IE.

    I’ve tried to use margin-top, but IE doesn’t recognize this, and the ul disappears before rollover is possible.

    I’ve tried using padding-top on the ul, but this allows the background color to bleed into my main nav.

    I’ve tried to use property “content” with an image to represent the top arrow – and give the “:after” style a width and height, but IE doesn’t recognize this.

    I’ve tried adding a “display: block” style to the “:after” element with no success.

    The only success I’ve had is adding padding-top to the “:after” element, and adjusting the “top” position. But IE only recognizes the width of the triangle, and required the user to trace a 2px wide line from main nav to dropdown list…which is not a viable solution. I tried adding left and right padding to this element to increase the rollover state for ergonomic usability, but this alters the look of the triangle on top.

    If anyone a viable solution to this dilemma, it would be greatly appreciated. –Thanks

    Link for current HTML and CSS:
    http://65.61.46.222/centered-aes_002.html

    Reply ↓

    • Adrian, of course you can change the overall height.

      Just don’t forget about adjusting both “line-height” for main menu elements and the “top” property for the sub-list.

      Good luck!

      Reply ↓

  49. Hi there,

    Great menu!

    One question. When I load my webpage in Safari the menu doesn’t initially drop when hovering. It does so in Firefox. What could be the problem?

    Thanks,

    Reply ↓

  50. Hello,

    I’m having a lot of trouble aligning the main menu buttons at center. I’ve looked at your replies to previous people asking this same question, however, the code available at http://jsfiddle.net/catalinred/DqvxR/ doesn’t work for this animated drop down menu.

    When I set the text to align at the center, the main menu buttons stay aligned at left, and the sub-menu buttons aligned at center. I want exactly the opposite.

    Can you help me?

    Reply ↓

  51. Hi Catalin thank u for this awesome menu. How do i change the hover color blue to other color. Pls help.

    Reply ↓

  54. Really impressive menu, hopefully i can make it work for me, but alas i think it may be too complex for my little brain..you rock!!!

    Reply ↓

  55. I am a little confused now. Is the menu (e.g. your demo link above) supposed to look exactly the same in all browsers? It works brilliantly on Mac and Windows Safari, Chrome, Firefox but current IE9 does no show gradients and transitions. Checked on three different computers (32 and 64 bit).

    Reply ↓

      • I have played around with the filter attribute as follows:

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444444′, endColorstr=’#111111′);

        Works in IE9 and looks fine but when I add this line to #menu ul a:hover it won’t show any sub levels anymore. Root and first level are displayed and that is it. Any idea?

        Reply ↓

  56. Greattt Idea, Nice Article !!
    it’s very helpfull for newbie like me!
    I would like to learning CSS3 for further
    Thank you Red :D

    Reply ↓

  57. Hello Red I need your help, how to put jquery in html with external file?
    i’ve try like this but doesn’t work!

    I put all the code above on different sheets, not united. And I’m using localhost xampp, MozilaFF 13:01, IE8, DreamwaverCS5. So Did I put the above code was correct?

    I hope you will make this tutorial such as CSS3 dropdown menu in the first tutorial in the previous section because more easy for newbie like me to learn.
    Thank you so much “Red” . God Bless u.. =)

    send mEmail: adhieresthenes@gmail.com or FB: Adhieresthenes Hier Banu Arfakhshad

    Reply ↓

  58. I’m sorry before if this litter in the comments! I’ve done and worked! try..on and on..
    Thank you so much for posting this great article Red ..

    Reply ↓

  59. sir, i am newbie for this css3 drop-down and i know i have more to study about this but if you please sir im hoping to have the ready made css so that i can study it well… plz kindly send this to my email.. roswaldmontero@live.com.. thanks sir…

    Reply ↓

  60. How would I select the first link (‘HOME’) with the pseudo-element :first-child? I tried numerous css definitions such as #menu ul li:first-child but that would select the first of the next level? I just want to style the first . Everything else is fine.

    Reply ↓

  61. Yet another question… I am trying to highlight the active link which I don’t think would work with a:active as the hover would overwrite it again. I was thinking of placing an extra (identical) element above (absolutely positioned) over the active . Not very elegant, I guess. What do you think?

    Reply ↓

  62. First of all, thanks for a great tutorial. The drop down menu looks awesome after I made my changes to your code. I am having trouble getting the mobile add-on to work with the iPhone. I do not have an iPad to test it on to see if it works with it. I was hopping you could tell me the error of my way. I am unable to get the menu to look correctly on the iPhone like your demo. The 2nd level menu items do not line up correctly with the 1st level items. I hope I have explained my self clearly for you.

    Any help is greatly appreciated,

    Brian

    Reply ↓

  63. Dear Red.
    I am trying to use your amazing menu.
    In the link which I submitted in this form of this post, you can see that my slideshow is overlapping the dropdown menu (see categories).

    Do you have any idea how I can setup the dropdown menu always in front?

    Thanks
    dunster

    Reply ↓

  69. Hi Red…

    Thanks a lot for the wonderful article. Please let me know how can the selected menu item (at least the top level) be highlighted (different font/bg color etc)…

    Thanks and Regards,
    Chander

    Reply ↓

  72. I really like this menu bar. I am implementing it in my site but am having a very difficult time getting rid of the excess bar on the right beside my last tab (the contact tab in your example). I would like my last tab to form into the rounded corners of the menu like the first tab on the left does. (much like the design of your “Cool CSS3 navigation menu” (http://www.red-team-design.com/cool-css3-navigation-menu).

    Reply ↓

  73. Hi, Just thought id chip in: instead of width, try min-width

    #menu ul a {
    padding: 10px;
    min-width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }

    So the nav can take longer than average names ;-)

    Thank you so much for this. epic. just plain epic.

    Reply ↓

  74. You are a real genius. This actually works on IE8 and 9. Can you believe it hahaha.
    It even works on Chrome. I still have to test the newest browser with Windows 8 (TM).
    Well done my friend.

    Reply ↓

  75. Is there any chance of removing the flicker bug when leaving the opened li downwards? (the inner ul goes downwards, which re-triggers the mouseover() function)

    tia

    Reply ↓

  78. Hi,

    I haven’t tried this out yet, but it does look fantastic! Excellent job explaining it all. But I do have a rather ‘dumb’ question though…

    Could I ad multiple columns to the drop downs, or even html? Like on this menu: http://livepreview.zxq.net/css3%20drop%20menu/

    When you view the links menu, you see the multiple columns, and the Blog link you see the image / html. Can I add that to this menu?

    Sorry for being such a noob.
    Thank you in advance!
    Brian

    Reply ↓

  79. Thank you for this tutorial. It helped a lot but I have a problem. My navigation is working properly except there are circles that are next to each word in the nav and I can’t get rid of them. Maybe you can help me.

    Reply ↓

  81. Hello can we use this on our sites? Also lets say I were to sell my site theme would it be ok if it had your buttons on it? Also is there some sort of licence? I really like this NAV and wanted to use it on my own site that is why I am asking this please reply to my email I added it in the form :D.

    Reply ↓

  83. hi
    wonderful menu and easy enough guide. I’m trying to incorporate this into a website for a local restaurant and managed fine so far (resizing and changing colours)
    One thing remails thou: I can’t see to change the colour for the menu bar in small screen mode (ie. mobile devices). What ever I try it remains at default gray gradient. I need to switch this to a purple gradient.
    Please help!

    Reply ↓

    • I managed to change the colours. Well hidden behind long lines of css-images :)
      Another thing though: can the big size menu be changed so that the hover effect becomes an on click effect when viewed from mobile browsers? kinda hard to hover something on a touch screen…

      Reply ↓

  89. First of all, I really enjoy this menu bar and thank you for the guide. However, I cannot for the life of me get it to work properly on an iPad. Your demo site works perfectly, but when I use my own site I get nothing. I’ve even gone so far as to copy and paste everything.

    Reply ↓

  90. Hello Cat,

    I have just viewed your demo menu on an Ipad and it does no seem to resize how you have described, however on my laptop in Firefox, when i re-size the browser window the effect takes place.

    Reply ↓

  91. Hello,
    I want your help, i have used your menu in my page,
    but i have just one issue that i want that drop-down sub-menu as a inline not the sub-menus as vertical..i have tried a lot but i failed to do this…
    so i have request to you please suggest me something what changes will be needed in css for the in-line menu.

    Reply ↓

  93. I continued to modify the z-index values and I was eventually able to fix the issue of the drop-down elements being hidden behind the slider images.

    Reply ↓

  94. Thank you so much. I’ve been looking through many css3 drop down menus and none have worked. Yours however does and not only that, it’s the most attractive of them all! :)

    Reply ↓

  97. Hi @gain!

    Now my dropdown menu is repaired!
    First you have “#menu, #menu ul” and there I have “width: 100%”.
    Now I added only to the “#menu ul”-tag the “width: 220px” and it is working! :D
    Very nice that menu!!!!!

    Elrontur

    Reply ↓

  98. Hi @gain!

    I have one more question…
    I build in my dropdown menu and now I implemented the jQuery code.
    Here you can watch the result: http://jsfiddle.net/DqvxR/101/

    My problems are these: In IE it isn’t working and in Google Chrome the menu works not good because the li elements disappear when I try to hover over it!

    Can someone help me?

    Reply ↓

  99. Everything works for me except that the sub menus will only display vertically. They WILL NOT display to the right or left. Very frustrating. Any thoughts?

    Thanks
    Josh

    Reply ↓

  101. REGARDING MOBILE VIEW
    Hi. I currently have this script above my parallax slider (which uses jquery 1.9).
    Now, I know you’re not suppose to include more than 1 jquery library in a file, but when I test the site with 1.9, the mobile tab doesn’t appear and the whole menu disappears when the window size decreases.

    However, when I attached jquery 1.8.2 instead of 1.9 the mobile menu works but my parallax slider doesn’t work….

    What do I do??

    (The 1.9 script must be placed at top for the parallax slider to work)…

    Thank you for your help in advance!

    Reply ↓

  102. Hi, I am not too familiar w/ CSS3 yet but I think I can handle this. Your drop down menu looks great. Before moving forward, I have 2 questions:
    1- Does this menu work on all the browsers (IE, Chrome, Safari, etc)??
    2- If I place the menu above a Flash animation OR Javascript slide show, do the drop down menus still show up??
    I am looking forward to your response, thank you!!!

    Reply ↓

  104. Hey!!! Really really greeeaaat post!!
    This is trully my first time using real CSS because Im kinda crack with HTML and I tried avoiding but WOW I think I love CSS thanks to you, thanks!!!
    BTW, you can check out my NEW MENU and see what “you” did there!! Thanks..

    BTW, the sliding down effect doesn’t occur.. why would that happen?

    Once again, thank you!!

    Reply ↓

  105. I discovered the menu as published doesn’t work on a Google Nexus7. Took a while but discovered the Nexus7 is 603px wide so I changed the @media statements in the css (there are two, a max-width and min-width of 600px) to 603px and it works. I don’t know whether I only needed to change just one of them but changed both anyway. Now it works on laptop, ipad, Galaxy S3 and Nexus7. BTW, I don’t own all of these! I have the laptop and S3, my daughter owns the ipad and my wife has the Nexus – I am not a techno junkie! ;-)

    If anyone knows a better solution then do tell …. also if anyone wants to give the technical explanation why the original css doesn’t work, then feel free. I just experimented and this worked and that’s all I needed.

    Reply ↓

  107. Great tutorial!!! I was wondering if you could help me I am having a hard time trying to get rid of the excess bar/space on the right beside my last tab (the contact tab in your example). I would like my last tab to form into the rounded corners of the menu like the first tab on the left does.

    Reply ↓

  111. Hi… i do all u said in the tutorial but when my window is small… i can`t see the menu button… what i am doing wrong?? pleaseeeeeeeeeeeeeee

    Reply ↓

  116. Hey…
    list-style: none;
    Needs to be added to line 70 of the demo to get rid of those pesky dots. It’s the one labeled #menu li, right above the font designation. But GREAT work… I actually got it to work in IE8.

    Reply ↓

    • Michelangelo, you’d need to update the lines with gradients and fallback color:

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

      Also, don’t forget about the CSS3 prefixed background properties!

      Reply ↓

  119. Hi!

    Thanks for a great menu!

    I have one question though. From the beginning I wrote a fixed width of the menu because I only have a few menu items. I worked fine but when I look at it in another browsers like IE, Crome and Safari the menu has jumped down to a new row. Of course I can write extra pixels on the width but then it doesnt look good in Firefox. I dont want any extra space on the right side of the menu. And if I set the width to auto it flows over the whole page. How can I solve this?

    Thanks and great work! :)

    / Katarina

    Reply ↓

    • Katarina, the width you have set is approximated. It doesn’t work like that, fonts do render a bit differently from browser to browser and that’s why your approximated width won’t work across all browsers. Unless of course you increase it, considering a margin of error.

      Anyway, if you still want to use this method to center the menu, here’s my solution for you, inspired by my latest article: http://jsfiddle.net/wH5em/1/

      An alternative is to use the display: inline-block for the main menu, and text-align: center for its parent.

      Good luck!

      Reply ↓

  121. I am working on this menu for a friend’s site. Help!
    1) For some reason it doesn’t seem to work in IE10 while working in Firefox.
    2) I cannot figure out how to make the opacity of the submenus a higher figure so that they show up over the stuff below.
    3) I cannot get the menu to fit below the banner where I want it.
    The under construction site is http://www.castlehillconstruction.com/newsite/
    Thanks for the help!

    Reply ↓

  123. Hi Catalin,
    can you please give me few moments?
    i used the menu here. but it’s not working with IE :(
    http:// bdpay24. com/ demo/ index.html
    which code i need to use here to work with IE ?
    i am not a professional developer.Here i got instruction, how to work with IE
    but i can’t understand. so i need something easier please
    can you please let me know.
    Regards
    madmud

    Reply ↓

  124. Hi there :)

    Thank you for this beautiful navigation. Here is my my use of your navigation http://moradnew.site88.net/lumenosity/normal/

    When the 2nd levels navigation appears and reach to the end of right side of the browser, it like clipped behind the browser side, so i hope if you add some way that when the 2nd levels menus to be turned to left, not to right as it set.

    I don’t know if you understood me. I mean i want the dropdown menus to be turned to left when it reach the browser right side like in “DDsmoothmenu” plugin.

    Cheers

    Reply ↓

  125. Hi,

    I was wondering how one might display the dropdown horizontally below the catagories? I’ve been trying to do it for hours now and I cant figure it out…

    Reply ↓

  127. Thanks for making this great menu implementation available. I looked through the questions and answers but may have missed it. Is there a way to indicate which items have a sub-menu (e.g. with an arrow)

    Reply ↓

  128. Dude,how u make the multi level dropdown menu?Can u teach me?I juz able to create until sub menu,thanks

    Reply ↓

  130. hello,
    thanks a lot for the css menu. I am building my first site ever, right now and I can really use some help.
    Just one question: why doesn’t the menu work properly on Safari?

    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>