Create a Drop-Down Navigation Menu with HTML5 and CSS3

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.

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:

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!

[Total: 4    Average: 5/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.