Creating a Drop-Down Menu with the Hover CSS Pseudoclass
In this penultimate part of a four-part series, you will learn how to use the "hover" CSS pseudo-class to build a fully-functional, CSS-based drop-down menu. The process is fairly straightforward, so you shouldn’t have trouble using this technique when developing navigation bars for your own websites.
Creating a Drop-Down Menu with the Hover CSS Pseudoclass - Adding dynamic behavior with the hover CSS pseudoclass (Page 4 of 4 )
Having already defined the structural markup of this sample menu, we need to add the CSS styles that will make it work properly. To do this I'm going to start styling the menu's main ordered list and its items, which will be accomplished in the following way:
/* main menu */
ul#navbar {
height: 26px;
margin: 0;
padding: 0;
list-style: none;
}
ul#navbar li {
float: left;
width: 150px;
position: relative;
}
ul#navbar li a:link, ul#navbar li a:visited {
display: block;
padding: 5px 20px 5px 20px;
background: #fc0;
text-decoration: none;
text-align: center;
font-size: 0.8em;
font-weight: bold;
color: #000;
border: 1px solid #000;
}
ul#navbar li a:hover {
background: #ff8000;
}
Basically, all that the above styles do is create a horizontal HTML list, where each of its items is positioned relatively on the web page. As you'll see in a moment, this step is necessary to display the corresponding child items without pushing down other sections of the page.
Now that the menu's main list has been styled , it's time to do the same thing with the subsections. The following CSS code does exactly that:
/* menu items */
ul#navbar li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
position: absolute;
top: 27px;
left: 0;
}
ul#navbar li:hover ul {
display: block;
}
ul#navbar li ul li a:link, ul#navbar li ul li a:visited {
background: #fff;
font-weight: normal;
border: 1px solid #000;
}
ul#navbar li ul li a:hover {
background: #eee;
}
From this code fragment, it's important to note two details: first, the menu's subsections have been absolutely positioned on the web document, and second, the line below:
ul#navbar li:hover ul {
display: block;
}
is the one that causes the subsections to be displayed when the mouse is placed over the menu's main items. This fragment shows how the smart use of the "hover" CSS pseudo-class can turn a static structure into a dynamic one.
Now that you've grasped how the earlier CSS code does its thing, it's time to list the full source code of the sample drop-down menu, including some additional styles for the <body> and main containers of the web page. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Drop down menu using :hover CSS pseudo class</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #eee;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #fff;
}
#header, #content, #footer {
padding: 20px;
}
/* main menu */
ul#navbar {
height: 26px;
margin: 0;
padding: 0;
list-style: none;
}
ul#navbar li {
float: left;
width: 150px;
position: relative;
}
ul#navbar li a:link, ul#navbar li a:visited {
display: block;
padding: 5px 20px 5px 20px;
background: #fc0;
text-decoration: none;
text-align: center;
font-size: 0.8em;
font-weight: bold;
color: #000;
border: 1px solid #000;
}
ul#navbar li a:hover {
background: #ff8000;
}
/* menu items */
ul#navbar li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
position: absolute;
top: 27px;
left: 0;
}
ul#navbar li:hover ul {
display: block;
}
ul#navbar li ul li a:link, ul#navbar li ul li a:visited {
background: #fff;
font-weight: normal;
border: 1px solid #000;
}
ul#navbar li ul li a:hover {
background: #eee;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Drop down menu using :hover CSS pseudo class</h1>
<ul id="navbar">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h2>Main content section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
</div>
</body>
</html>
At this stage, the menu is not only is fully functional, but behaves as one might expect. The image below partially shows the output rendered on screen when the previous example is parsed by the browser:
That looks pretty nice, doesn't it? Considering that building a menu like this required coding only some straightforward CSS styles, the effort is really worthwhile. As you may have realized, the visual appearance given to the menu can be customized easily, so feel free to tweak it to suit your personal preferences.
Final thoughts
In this penultimate episode of the series, you learned how to take advantage of the functionality given by the "hover" pseudo-class to build a fully-functional, CSS-based drop-down menu. As you saw, the process is fairly straightforward, so in theory you shouldn't have major trouble using this technique when developing navigation bars for your own websites.
In its current state, the menu has been constructed to work with only the "Home," "About Us" and "Products" sections of a hypothetical website. Therefore, in the last part of the series I'll be discussing how to add it to the remaining "Services" and "Contact" sections as well.
Don't miss the final tutorial!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Style Sheets 
/ 2 
More Top jQuery Plugins for Menus
