CSS Navigation Menu: Drop Down

Creating a Navigation Menu with drop downs is not hard when you understand the CSS needed to create the menus. In this intermediate tutorial we’ll go through the necessary code; both HTML and CSS, to build this navigational menu and others like it. We’ll also show you an easy way to add a highlighted state to your navigational menu item.

Example

Here’s the example of this navigation (click here)

Here’s the link to the header and two background images for this tutorial:

http://www.everythingaboutweb.com/classes/examples/ehd_navigation/navigation/images/header.png
http://www.everythingaboutweb.com/classes/images/nav_on.png
http://www.everythingaboutweb.com/classes/images/subnav_on.png

Note: to download an image from a link, simply control-click and “save” (Firefox) or “download” (Safari) the image to your desktop. Save it from this link on this page, don’t open it in a new window because it’s too small and white to see it in a new page.

Step 1: HTML

Note that the sub-navigation is marked with a class called “subNav.” And the section “News” has both a class indicating that it has sub-navigation and to create the highlighted state.

<div id="header">
 <div id="nav">
   <ul>
     <li class="subNav"><a href="work.html">OUR WORK</a>
       <ul>
         <li><a href="print.html">Print</a></li>
         <li><a href="web.html">Web</a></li>
         <li><a href="motion.html">Motion</a></li>
       </ul>
     </li>
    <li class="subNav highlight">NEWS
       <ul>
         <li><a href="news_2011.html">2011</a></li>
         <li><a href="news_2010.html">2010</a></li>
         <li><a href="news_2009.html">2009</a></li>
       </ul>
     </li>
     <li class="subNav"><a href="about.html">ABOUT</a>
      <ul>
         <li><a href="nathan.html">Nathan</a></li>
         <li><a href="katie.html">Katie</a></li>
        </ul>
     </li>
     <li class="subNav"><a href="contact.html">CONTACT</a>
       <ul>
       <li><a href="email.html">Email us</a></li>
         <li><a href="directions.html">Directions</a></li>
       </ul>
     </li>
    </ul>

</div>
   </div>

Step 2: Create a CSS file

Create a CSS file and be sure that the CSS is linked in the head of your HTML file.

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

Step 3: Add basic CSS

For consistent results on browsers, “zero out” your margins and padding using the * (universal selector type) and create a zero margin on the top and left margins of your body. The header has a defined height and a background image with a bit of gradient.

The div named “nav” is positioned absolute and given padding, a margin, and a width. Note that unlike the CSS Navigation Menu: Basic, the #nav div is NOT floated. The reason is that the drop down menus will not display on top of the other items in the header if the #nav is floated. Therefore it is positioned absolute.

*{
    margin: 0px;
    padding: 0px;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	background-color: #f6f5f4;
}

#header {
	height: 150px;
	background-image: url(images/header.png);
}    

#nav {
	margin-left: 43px;
	padding-top: 15px;
	width: 400px;
	position: absolute;
}

Step 4: Add style to the list tag

• Remove the bullets with list-style-none
• Float left
• Add the width of each list item
• Select font family, size, letter spacing and align to center
• The line-height of 25px defines height of the list item.

#nav li {
	list-style-type: none;
	float: left;
	width: 90px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-align: center;
	line-height: 25px;
}

Step 5: Add style to the a:link and a:hover states

• Select color for text
• Remove underline with text-decoration none
• Adding display block will allow the background color or image to fill up the entire width and height and will give you the look of a “button.”
• Select color for hover state
• Insert background image and add repeat, if necessary. Note that in this example the background image for the #nav li has a transparent background, the background for the subnav is opaque.

#nav li a {
	color: #f6f5f4;
	text-decoration: none;
	display: block;
}

#nav li a:hover {
	color: #333;
	background-image: url(images/nav_on.png);
	background-repeat: repeat-x;
}

Step 6: Create a class for the subNav ul snd hover ul

• Note that in the HTML we’ve given all the sections with subnav the class=”subNav.”
• Display: none will hide the drop down menus
• Adding display: block to the hover of the ul will make the drop down menus visible on a hover.

#nav ul .subNav ul {
	display: none;
}
#nav ul .subNav:hover ul{
	display: block;
}

Step 7: Add style to the list tag for the subNav

• Add background image. This image is different than the image for the main nav. This image is opaque instead of transparent. Add a repeat, if necessary.
• Add a border on the top that’s solid, #999 and 1 px.
• For the a:link of the subNav, create the height for each menu item by adding a line height, center the text, and select a font-family and color for the text.

#nav ul .subNav ul li {
	background-image: url(images/subnav_on.png);
	background-repeat: repeat-x;
	border-top: 1px solid #999;
}
#nav ul .subNav ul li a {
	line-height: 25px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

Step 8: Create the a:link, a:visited, a:hover, a:active for the subNav li

• Select color for linked text
• Select color for hover

#nav li.subNav ul li a:link, #nav li.subNav ul li a:visited {
	color: #333;
}
#nav li.subNav ul li a:hover, #nav li.subNav ul li a:active {
	color: #F34B2B;
}

Step 9: Create a class for the highlighted state

• Note that the selector type called class has a “.” in the front of the name.
• Select color for text
• Add background image
• Add a border on the right and left that’s solid, #999 and 1 px.
• In the HTML from Step 1, the class is already attached to the li item. This is necessary in order for the highlighted state to be visible.

.highlight{
	color: #333;
	background-image: url(images/nav_on.png);
	border-right: 1px solid #999;
        border-left: 1px solid #999;
}

Congratulations!  You just created a drop down menu completely with CSS! – Awesome.