CSS Drop Down Menus

A simple and eye-catching effect can be applied to a website by using a drop down menu. By adding this ability in an easily accessible area, web designers provide a professional look with increased navigational capabilities.

We will be creating our own drop down menu made completely from CSS and HTML through this tutorial.

Our first and foremost priority is to set up the HTML markup used for this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>
</head>

<body>

<div id="menu">
	<ul>
		<li><a href="#">Home</a>

		<ul class="sub-menu">
			<li><a href="#">Pages</a></li>
			<li><a href="#">Archives</a></li>
			<li><a href="#">New Posts</a></li>
			<li><a href="#">Recent Comments</a></li>
		</ul>

		</li>

		<li><a href="#">About</a>

		<ul class="sub-menu">
			<li><a href="#">Get to know us</a></li>
			<li><a href="#">Find out what we do</a></li>
		</ul>

		</li>

		<li><a href="#">Contact</a>

		<ul class="sub-menu">
			<li><a href="#">E-mail Us</a></li>
			<li><a href="#">Use Our Contact Form</a></li>
		</ul>

		</li>
	</ul>
</div>

</body>
</html>

Take note of how the sub-menus are placed in the markup. They are directly inside each corresponding <li> element. This will make it easy to apply our hover effect.

Moving on to the first snippet of CSS:

#menu {
	position: relative;
	margin-left: 30px;
}

The above lines position the menu 30 pixels to the left of the it’s normal position in the document. This is a simple method of placement.

#menu a {
	display: block;
	width: 140px;
}

#menu ul {
	list-style-type: none;
	padding-top: 5px;
}

#menu li {
	float: left;
	position: relative;
	padding: 3px 0;
	text-align: center;
}

#menu a

In this set of properties, we display the link elements as blocks. This means that we can assign a width/height to each element. In this case, we only define the width because the height depends on how many menu-items there are.

#menu ul

Our code here removes the default bullet points assigned with list elements. It also places a small offset between the menu and top of the page.

#menu li

In order to ensure that all list elements are on the same line, we float them to the left and set a relative position for them. We also add offsets from the top and bottom of each element. Centering the text enhances the look.

#menu ul.sub-menu {
	display: none;
	position: absolute;
	top: 20px;
	left: -10px;
	padding: 10px;
	z-index: 90;
}

#menu ul.sub-menu li {
	text-align: left;
}

#menu li:hover ul.sub-menu {
	display: block;
	border: 1px solid #ececec;
}

#menu ul.sub-menu

Each sub-menu will be hidden until the user hover’s over the list item. This is why we do not display this element by default. By positioning it 20 pixels from the top and -10 pixels from the left, we place it directly under the corresponding link element. The text inside is set to have an offset from the borders. Finally, the z-index is set to a high number to make this sub-menu appear above other elements.

#menu ul.sub-menu li

This code aligns the text to the left and provides a nice design.

#menu li:hover ul.sub-menu

When a user hovers over the list element, we want to display the corresponding sub-menu. By setting the display style to block at the time of a hover event, we override our previous code and have our menu displayed.

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
	font-size: 14px;
}

a {
	text-decoration: none;
	color: #838383;
}

a:hover {
	color: black;
}

The above code is something extra which I threw in. Using a reset statement enables a similar view in many browsers. The font and color change add in some extra pizazz to our menu.

Here is our final file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
	font-size: 14px;
}

a {
	text-decoration: none;
	color: #838383;
}

a:hover {
	color: black;
}

#menu {
	position: relative;
	margin-left: 30px;
}

#menu a {
	display: block;
	width: 140px;
}

#menu ul {
	list-style-type: none;
	padding-top: 5px;
}

#menu li {
	float: left;
	position: relative;
	padding: 3px 0;
	text-align: center;
}

#menu ul.sub-menu {
	display: none;
	position: absolute;
	top: 20px;
	left: -10px;
	padding: 10px;
	z-index: 90;
}

#menu ul.sub-menu li {
	text-align: left;
}

#menu li:hover ul.sub-menu {
	display: block;
	border: 1px solid #ececec;
}
</style>

</head>
<body>

<div id="menu">
	<ul>
		<li><a href="#">Home</a>

		<ul class="sub-menu">
			<li><a href="#">Pages</a></li>
			<li><a href="#">Archives</a></li>
			<li><a href="#">New Posts</a></li>
			<li><a href="#">Recent Comments</a></li>
		</ul>

		</li>

		<li><a href="#">About</a>

		<ul class="sub-menu">
			<li><a href="#">Get to know us</a></li>
			<li><a href="#">Find out what we do</a></li>
		</ul>

		</li>

		<li><a href="#">Contact</a>

		<ul class="sub-menu">
			<li><a href="#">E-mail Us</a></li>
			<li><a href="#">Use Our Contact Form</a></li>
		</ul>

		</li>
	</ul>
</div>

</body>
</html>

Feel free to view the demo or download the file.

Note: This drop down menu is not supported by IE6 because it does not fully support the css hover pseudo-class. If you would like to create compatibility for this browser, Whatever:hover is a quick JavaScript fix.

Leave a Reply

CSS Drop Down Menus