Create a rocking drop down navigation menu using css3

The web is constantly improving and new techniques are constantly being taught throughout the web. In today’s tutorial I will explain to you, how you can create a drop down menu using just html and css3.

The HTML

The first thing you want to do it create a new folder on your desktop or a good place to hold your drop down menu. Then open up your text editor and create a .html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create a rocking drop down navigation menu using css3 </title>
</head>

<body>
</body>
</html>

The next thing we are going to do is add in some html.

<div class="menu-nav"> 
	<ul> 
		<li><a href="#">Home</a></li> 
		<li><a href="#">Work</a> 
       <ul> 
                <li><a href="#">Photoshop</a></li> 
                <li><a href="#">Illustrator</a></li> 
                <li><a href="#">Dreamweaver</a></li> 
                <li><a href="#">Flash</a></li> 
            </ul> 
		</li> 
        	<li><a href="#">About Me</a></li> 
        	<li><a href="#">Videos</a> 
                <ul> 
                    <li><a href="#">Youtube</a></li> 
                    <li><a href="#">Vimeo</a></li> 
                    <li><a href="#">Blip</a></li> 
                </ul> 
			</li> 
		<li><a href="#">Tutorial</a></li> 
		<li><a href="#">Interviews</a></li> 
		<li><a href="#">Resources</a></li> 
		<li><a href="#">Contact</a></li> 
		</ul> 
</div><!--end menu-nav-->			  

The above code is the code used to make the structure of our drop down menu navigation. The menu navigation above consist of the li tag which means list. To make the drop down menu I have added another list inside of a list. For example the code below is just a simple list with no drop down.

<ul>
    <li>Link goes here</li>
    <li>Link goes here</li>
    <li>Link goes here</li>
    <li>Link goes here</li>
</ul><!--end of list-->

Now if you take a look at the code below you will see how you can add another list within a list to create a drop down menu.

Note: It has to be styled before it appears as a drop down but this is the just the markup.

<ul>
    <li>Link goes here</li>
    <li>Link goes here</li>
    <li>Link goes here</li>
    <li>Link goes here
    
    <ul>
    	<li>Drop down link goes here</li>
        <li>Drop down link goes here</li>
        <li>Drop down link goes here</li>
        <li>Drop down link goes here</li>
    </ul>
    
    </li>
</ul><!--end of list-->

The CSS

The css is the spice to our drop down menu. We use css to style our drop down menu and make it look worth while. First thing you want to do is save your html document. Now create a css file and save it as style.css.

Note: Make sure to call your .css file in the head of your html document. Place the code below above the head tag in your html document.

<link rel="stylesheet" type="text/css" href="style.css"/>

Now that you have your style.css file open we can now begin adding our style in. Add the code below into your stylesheet. The code below is just a reset for your css and the container is just to keep our drop down menu contained.

* {margin: 0; padding: 0;} /*Reset*/

body{
	font-family:Helvetica,Arial, sans-serif; 
	font-size:14px; 
	background:#333;
}
#container {
	width:960px; 
	margin: 0 auto;
}

Now here is the part of where we begin the actual styling of our drop down menu. Copy and paste the code below into your stylesheet and I will explain it below.

.menu-nav { 
	position:relative; 
	width:797px; 
	height:50px; 
	font-size:14px; 
	color:#999; 
	margin: 0 auto; 
	margin-top: 20px;
}

.menu-nav ul { 
	list-style:none; 
	color: #FFF;
}

.menu-nav ul li {
	 float:left; 
	 position: 
	 relative;
}
.menu-nav ul li a { 
	border-right:1px solid #364f87; 
	border-left:1px solid #7189c0; 
	padding:20px; 
	display:block; 
	text-decoration:none; 
	text-align:center; 
	color:#FFF; 
	background: #395593;
	background: 
	-moz-linear-gradient(top, #647db5, #395593);
	background: -webkit-gradient(linear, left top, left bottom, from(#647db5), to(#395593)); 
	text-shadow: 0 -1px 0 #111;
}

The code below is the styling of our html list items. Many of you are probably familiar with the css but not familiar with css properties like -moz-linear-gradient. The moz targets firefox and linear-gradient is the new way of achieving a gradient without using an image.

Copy and paste the code below into your stylesheet document and I will explain it below.

.menu-nav ul li a:hover { 
	background: #647db5; 
	background: -moz-linear-gradient(top, #395593, #647db5);
	background: -webkit-gradient(linear, left top, left bottom, from(#395593), to(#647db5)); 
	color:#fff;
} 

.menu-nav ul li ul {
	display: none;
}
	
.menu-nav ul li:hover ul {
	display:
	block; 
	position: 
	absolute; 
	top:56px; 
	min-width:200px; 
	left:0; 
	margin-top: -1px;
}	

.menu-nav ul li:hover ul li a {
	display:block; 
	color:#ffffff; 
	width: 110px; 
	text-align: center;
	border-bottom: 1px solid #283f74;
	border-top: 1px solid #366ea6; 
	background: #364f87;
}

.menu-nav ul li ul li:first-child a {
	border-top:none;
}

.menu-nav ul li ul li:last-child a {
	border-bottom-left-radius: 5px; 
	border-bottom-right-radius: 5px; 
	-moz-border-radius-bottomleft: 5px; 
	-moz-border-radius-bottomright: 5px; 
	-webkit-border-bottom-right-radius: 5px; 
	-webkit-border-bottom-left-radius: 5px; 
}
	
.menu-nav ul li:hover ul li a:hover { 
	background:#395593; 
	color:#ffffff; 
}

The code above is the styling of the hover effect used in the drop down menu navigation. For example whenever you roll over a button that has a drop down menu you see the effect happen. After you have placed the code above into your stylesheet you now have created a drop down menu using pure css3.

CSS3 is not widely supported now days but is supported in most browsers. If you’re not familiar with css3 start to use it in your projects to gain a great understanding of it. Also subscribe to our RSS FEED to stay up to date with the web trends and of course to learn new tricks and techniques.

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. JOSE ALBERTO DIAZ says:

    I came here by visiting SIX REVISIONS tutorials, and i found some of youre work, i think it’s great, like to learn from the best ones like you!!

    Greetings from Tijuana México!

  2. john carswell says:

    Great tutorial, however when you add this script into another html script and combine it with other css code the dropdowns lose relativity and do not line up the same way. How do I keep the dropdowns lined up correctly?

Leave a Reply