Its been a long time since I wrote an article in this category (Web Design) so I decided to write an article on creating a horizontal drop down menu purely with HTML and CSS. To create a simple menu see CSS Horizontal Navigation Menu. Since the horizontal drop down menu uses only CSS and HTML it doesn’t work with Internet Explorer 6. The whole drop down menu concept makes use of the CSS pseudo class :hover, when you place the mouse pointer over a parent menu the CSS “display” attribute changes to “block” and displays the drop down menu, when you move the mouse pointer away from the menu the “display” attribute changes to “none” so the drop down menu disappears.
Here is the entire code for a horizontal drop down menu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
ul#navbar {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#navbar li {
float: left;
border: 1px solid black;
text-align: center;
}
ul#navbar a {
background-color: #CCC;
color: #000;
text-decoration: none;
display: block;
width: 120px;
padding: 4px;
}
ul#navbar a:hover {
background-color: #CFF;
text-decoration: underline;
}
ul#navbar ul {
display: none;
list-style-type: none;
}
ul#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
ul#navbar li:hover li {
float: none;
}
</style>
</head>
<body>
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Parent 1</a>
<ul>
<li><a href="#">Child 1</a></li>
<li><a href="#">Child 2</a></li>
<li><a href="#">Child 3</a></li>
</ul></li>
<li><a href="#">Parent 2</a>
<ul>
<li><a href="#">Child 1</a></li>
<li><a href="#">Child 2</a></li>
<li><a href="#">Child 3</a></li>
</ul></li>
</ul>
</body>
</html>
Notice the DOCTYPE declaration at the beginning, without this the code will not work in Internet Explorer. See a live demo
Leave a Reply