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”