CSS Navigation Menu: Drop Down
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;
}
One thought on “CSS Navigation Menu: Drop Down”