Finishing a Drop-Down Menu with the Hover CSS Pseudoclass
In the last few months, “hover” CSS pseudo-classes have gone through a rebirth process that allows us to evaluate their actual functionality from a new and fresh point of view. This article series shows you how to unlock their potential. In this last part of the four-part series, we'll finish building the drop-down menu that we began in the previous part.
Finishing a Drop-Down Menu with the Hover CSS Pseudoclass - Review: building a customizable drop-down menu using CSS pseudo-classes (Page 2 of 4 )
As usual, before I add a few more sections to the drop-down menu that I started building during the previous part of the series, I'll reintroduce the full source code corresponding to this example so you can quickly recall its inner workings.
Given that, here’s the web page that constructs the menu in question. Pay close attention to its definition:
<!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>
As seen above, building a drop-down by using the functionality provided by “hover” CSS pseudo-classes is a straightforward process. In summary, the whole development process is reduced to coding a set of nested HTML lists per menu section, and then properly defining the “hover” state of the list items containing the menu elements. It’s that simple, really.
However, as I explained in the introduction, the drop-down menu is still incomplete, since it works only for the “Home,” “About Us” and “Products” sections of a fictional web site. This is not good enough even for demonstration purposes.
Therefore, in the following section I’ll be adding a couple of extra items to the menu, which will allow us to navigate easily across the “Services” and “Contact” sections of the aforementioned website.
To learn more about this process, click on the link below and read the lines to come.
Style Sheets 
/ 2 
More Top jQuery Plugins for Menus
