CSS3 Dropdown Menu

November 8, 2011

With the implementation of CSS3 can sometimes be unnecessary use jQuery. In this tutorial we will see how to create a simple drop-down menu and insert CSS3 transitions to make it more interactive.

This tutorial is compatible with all modern browsers that support CSS3 Transitions. For Internet Explorer that don’t support the transitions you will just see a simple switch on hover.

Let’s start!

HTML

As you can see the HTML structure does not contain more than we need, easy to understand and simple customization depending on your needs. It just adds a special class for each menu and sub-menu level.

<header>  
<div id="top">  
  <nav id="topmenu">  
    <ul>  
     <li><a href="">Home</a></li>  
     <li><a href="">About</a></li>  
     <li><a href="">Portfolio<span class="arrow">More Link</span></a>  
        <ul class="sublist">  
           <li><a href="#">Sub link</a></li>  
           <li><a href="#">Sub link</a></li>  
           <li><a href="#">Sub link<span class="arrow-right">More Link</span></a>  
        <ul class="subsublist">  
            <li><a href="#">Sub Sub link</a></li>  
            <li><a href="#">Sub Sub link</a></li>  
            <li><a href="#">Sub Sub link</a></li>  
       </ul>  
    </li>  
    </ul>  
    </li>
    <!-- OTHER LINKS SECTION -->  
    </ul>  
</nav>  
</div>  
</header>    

CSS and CSS3 Transitions

Even if may appear more difficult than it sounds, here are the basic rules written just to work best the complete menu. You can remove the transitions and see how the menu behaves without them, and later implement them depending on your design requirements.

As you can see below I have used the CSS3 multiple transitions that he might have more control over every parameter of the menu. I also used the visibility property too is supported by CSS3 transitions, so I can control the visibility and decide when I want to to display the sub-menu.

Thanks to this property, you can avoid a bug because the opacity is set to 0. Try to remove the visibility property from the sub-menu and see what happens. For the rest is a simple drop-down menu visible on all browsers.

/* LINK TRANSITION */
a {
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}
/* MENU STYLE */

header {
	width:100%;
}

header #top {
	background:#222;
	float:left;
	height:30px;
	line-height:30px;
	width:100%;
}

header nav#topmenu {
	margin:0 auto;
	padding:0 15px;
	position:relative;
	width:960px;
}

header nav#topmenu ul {
	margin:0
	padding:0;
}

header nav#topmenu ul li {
	float:left;
	position:relative;
	font-size:10px;
	list-style:none;
	margin:0;
	padding:0;
	width:90px;
	text-align:center;
	text-transform:uppercase;
	border-right:1px solid #ccc;	
}

header nav#topmenu ul li:first-child {
	border-left:1px solid #ccc;
}

header nav#topmenu ul li a {
	color:rgba(255,255,255,0.6);
	text-decoration:none;
	display:block;
}

header nav#topmenu ul li a:hover {
	color:#fff;
}

header nav#topmenu ul li:hover > a { /* ACTIVATE LINK WHEN THE MOUSE OVER SUB-MENU */
	color:#fff;
}

header nav#topmenu ul li span { 
	background:url(arrow.png) center no-repeat;
	height:10px;
	position:absolute;
	text-indent:-9999px;
	top:10px;
	right:5px;
	width:10px;
}

header nav#topmenu ul li span.arrow {
	background-position:0 2px;
}

header nav#topmenu ul li span.arrow-right {
	background-position:-10px 2px;
}

header nav#topmenu ul li ul.sublist { /* FIRST SUB-MENU STYLE */
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	left:0px;
	top:31px;
	background:#222;
	width:90px;
	opacity:0;
	visibility:hidden; /* Avoids being selected even if the opacity is set to 0 */
        
        /* CSS3 Multiple Transitions */

	-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; 
	-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}

header nav#topmenu ul li ul.sublist li {
	border:none;
	border-bottom:1px solid #ccc;
	clear:both;
	margin-top:-15px;
	padding:0;
	width:90px;
	-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

header nav#topmenu ul li ul.sublist li a {
	color:rgba(255,255,255,0);
}

header nav#topmenu ul li:hover ul.sublist {
	opacity:1;
	visibility:visible;
}

header nav#topmenu ul li:hover ul.sublist li {
	margin-top:0;
	opacity:1;
}

header nav#topmenu ul li:hover ul.sublist li a {
	color:rgba(255,255,255,0.6);	
	-moz-transition:color 0.1s ease-out;
	-webkit-transition:color 0.1s ease-out;
	-o-transition:color 0.1s ease-out;
	transition:color 0.1s ease-out;
}

header nav#topmenu ul li:hover ul.sublist li a:hover {
	color:rgba(255,255,255,1);	
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}

header nav#topmenu ul li:hover ul.sublist li:hover > a { 
        /* ACTIVATE LINK SUB-MENU WHEN THE MOUSE OVER SUBSUB-MENU */
	color:#fff;
}

/* SUB-MENU SUB STYLE */
header nav#topmenu ul li ul.sublist li ul.subsublist {
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	left:61px;
	top:0px;
	background:#222;
	width:90px;
	opacity:0;
	visibility:hidden;
	-moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}

header nav#topmenu ul li ul.sublist li ul.subsublist li{
	border:none;
	border-bottom:1px solid #ccc;
	clear:both;
	margin:0;
	padding:0;
	width:90px;
	opacity:1;
}

header nav#topmenu ul li ul.sublist li:hover ul.subsublist {
	opacity:1;
	left:91px;
	visibility:visible;
}

Conclusion

I hope is of your pleasure this tutorial, this experiment can used in your studies on CSS3 and also a great way to don’t use jQuery.

11 Comments

  1. One word {PERFECT}..

    Keep up your good work

  2. Amazing, do you have any idea’s about how to handle the sub-menu on touch-screens and mobile?

  3. Nice articles, but can you take this tutorial with HTML5 so,

  4. this is not working in IE8.
    I need some solution please

  5. Really useful publish..Thanks for sharing with us. it will be very useful while functioning.. Thanks a LOT!!s

  6. @Bluxart

    Actually, all touch devices have killed the “hover” state. How do you hover on a touch screen? Great article. Love CSS3!

  7. Thanks for the info, helpful information! it’s hard to figure that out by yourself

  8. JI Rodriguez

    I tried to use it in an iPad and the effects were blocked, do you have this in html5 ?, thank for the tutorials !

  9. Thanks thanks , I was create this CSS on My twenty ten themes and rebuild with more slow effect :D
    thanks for the literatur :D

  10. osman

    its great! thanks…

Leave a Reply