thumbnail

There are some great solutions to drop-down navigation menus, like the superfish jquery plugin for example. Many of them are using a lot of files and resources to generate the drop-downs but sometimes you don`t need all of them. I want to show you how to create your own simple, but stylish drop-down menu, using the new HTML5 tags and the awesome CSS3 styles.

10083 downloads

The drop-down we`re going to build is hided and revealed on hover using only CSS. Using the new CSS3 transitions features, we`ll animate the hover states and drop-downs. These effects act exactly like the javascript effects you`re used to use. The structure of the files is simple. You need an index.html and a style.css file in which to store the css styles.

Here`s a preview of what we`ll build today:

preview Create a Drop Down Navigation Menu with HTML5 and CSS3

Let`s begin with the HTML structure. That`s the head part:

<!doctype html>
<html lang="en>
<head>
	<meta charset="UTF-8">
	<title>HTML5 / CSS3 Drop-Down Navigation Menu</title>
	<meta name="description" content="">
	
	<link rel="stylesheet" href="style.css">
	
	<!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
</head>

In the body part, we`ll add the html code for the nav menu. Each ul list inside a li is a drop-down menu. I added “»” to each parent li to show the hierarchy. The code creates right double angle quotes to element.


<body>
<nav id="nav">
	<ul id="navigation">
		<li><a href="#" class="first">Home</a></li>
		<li><a href="#">Services &raquo;</a>
			<ul>
				<li><a href="#">Web Development</a></li>
				<li><a href="#">Logo Design</a></li>
				<li><a href="#">Identity & Branding &raquo;</a>
					<ul>
						<li><a href="#">Business Cards</a></li>
						<li><a href="#">Brochures</a></li>
						<li><a href="#">Envelopes</a></li>
						<li><a href="#">Flyers</a></li>
					</ul>					
				</li>					
				<li><a href="#">Wordpress</a></li>
			</ul>
		</li>
		<li><a href="#">Portfolio &raquo;</a>
			<ul>
				<li><a href="#">Graphic Design</a></li>
				<li><a href="#">Photography</a></li>
				<li><a href="#">Architecture</a></li>
				<li><a href="#">Calligraphy</a></li>
				<li><a href="#">Film &raquo;</a>
					<ul>
						<li><a href="#">John Carter</a></li>
						<li><a href="#">The Avengers</a></li>
						<li><a href="#">The Amazing SpiderMan</a></li>
						<li><a href="#">Madagascar 3</a></li>
					</ul>						
				</li>
				<li><a href="#">Graffity </a></li>
			</ul>				
		</li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#" class="last">Contact</a></li>
	</ul>
</nav>

</body>
</html>

Now let`s stylize the navigation. We`ll start with the styles for the main nav. The styles for #nav id can be removed if you want. They are just to center the menu. You can alter them to fit your design.


/* Main Navigation */
#nav {
	position:relative;
	width:620px;
	margin:0 auto; 
	margin-top:50px;
	padding:10px;
}

ul#navigation {
	margin:0px auto;
	position:relative;
	float:left;
	border-left:1px solid #c4dbe7;
	border-right:1px solid #c4dbe7;
}

ul#navigation li {
	display:inline;
	font-size:12px;
	font-weight:bold;
	margin:0;
	padding:0;
	float:left;
	position:relative;
	border-top:1px solid #c4dbe7;
	border-bottom:2px solid #c4dbe7;
}

ul#navigation li a {
	padding:10px 25px;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border-right:1px solid #fff;
	border-left:1px solid #C2C2C2;
	border-top:1px solid #fff;
	background: #f5f5f5;
	
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}

ul#navigation li a:hover {
	background:#f8f8f8;
	color:#282828;
}

ul#navigation li a.first {
	border-left: 0 none;
}

ul#navigation li a.last {
	border-right: 0 none;
}

ul#navigation li:hover > a {
	background:#fff;
}

Notice that ul#navigation li a has some transition styles. They`re used to create a nice fading effect on hover.

Now let`s stylize the drop-down menus:


/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important, 
being the ones which make the drop-down to appear on hover */
	visibility:visible;
	opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
	list-style: none;
    margin: 0;
    padding: 0;    
/*the next 2 styles are very important, 
being the ones which make the drop-down to stay hidden */
    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
	width:180px;
	background:#f8f8f8;
	box-shadow:1px 1px 3px #ccc;
/* css3 transitions for smooth hover effect */
	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-o-transition:opacity 0.2s linear, visibility 0.2s linear; 
	transition:opacity 0.2s linear, visibility 0.2s linear; 	
}

ul#navigation ul {
    top: 43px;
    left: 1px;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px; /* strong related to width:180px; from above */
}

ul#navigation ul li {
	clear:both;
	width:100%;
	border:0 none;
	border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
	background:none;
	padding:7px 15px;
	color:#616161;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border:0 none;
	float:left;
	clear:both;
	width:150px;
}

Now the menu is stylized and the developing process if finished. The menu is ready to be used in your own projects. Making use of CSS3, there are, of course, IE compatibility issues with the menu. The smooth effects implemented with CSS3 transitions doesn`t work in IE, but the menu is still functional and can be a reliable alternative to javascript menus.

I thank you for your time and for any feedback/questions, don`t hesitate to leave a comment below!

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • Nick

    Congratulations…..

    I think this one is one of the best tutorial that i have seen.

    Thanks a lot. Hope to see more from you.

  • alex1984

    This is a very decent way to create a dropdown menu, thanks for that! I tried out and it looks really nice, but when I move the cursor from (in your example) “services” downwards, the dropdown-links disappear immediatelly and I have no chance to klick on them… Do you have an idea what could have went wrong?

  • Dutch

    Great article…..During my testing phase of your drop menu i found it didn’t work on safari and also on andriod devices.

  • ber

    i am free tank u

  • বিহঙ্গ

    Really its great………………..Thank you
    Madalin Tudose

  • Konrad

    Very good work. However I have one problem. I know that almost no one uses Opera but still it would be great if it would work for that browser. The menu doesn’t drops down and it behaves strangely. I would be gratefull for any solutions.

  • thanks

    One of the best tutorials available…thanks for being so generous with your knowledge.

  • Arti Badve

    Superb!!!

  • deepsky

    very good?thank you

  • Thomas

    Hey, very nice tutorial and good looking dropdown menu, but one question:
    How would I change the width of the dropdown menus themselves.
    I tried giving a class to the appropriate and then styling it in the css. I can change stuff like background color, but I cannot change width, I’ve also tried adding width to several other id’s and classes in the stylesheet but nothing seems to change. Any help?