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 - The drop-down menu's full source code (Page 4 of 4 )
As I said in the preceding segment, below I listed for you the drop-down menu’s full source code. Now you can see how it looks after receiving the final touches. 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>
<li><a href="#">Services</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="#">Contact</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>
Mission accomplished. This simple (well, to be frank, not so simple) example demonstrates in a nutshell that “hover” CSS pseudo-classes can be a really powerful tool when used in a clever way. In addition, the complementary image below should give you a better idea of how the menu looks after receiving the brand new “Services” and “Contact” sections:
Based upon the structure of the previous menu, it’s perfectly possible to create even more complex hierarchical navigation structures. The whole development process would only require adding a few more nested HTML lists along with the set of pseudo-classes that make them work properly.
Final thoughts
Sad but true, we’ve come to the end of this series. Hopefully, the experience has been educational, since you learned how to use “hover” CSS pseudo-classes in a different way from assigning a visual style to <a> HTML elements.
Keep in mind that all the examples shown in these tutorials will work in Internet Explorer 7 and above. If you’re not planning to drop support for version 6 and below any time soon, then a small portion of JavaScript should be used to make them work correctly.
See you in the next web design 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
