Easy Drop Down Menu

A easy, cross browser compatible horizontal Drop down CSS menu using one image, no javascript.

Menu features:

list based;
only one image used;
no javascript required;
easy to customize;
easy to implement;
cross-browser compliant;

Demo:

HTML code:

<!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">
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Drop Down Menu Easy</title>
</head>
<body>

<div class="drop">
<ul class="drop_menu">
<li><a href='#'>Easy</a></li>
<li><a href='#'>Drop</a>
	<ul>
	<li><a href='#'>Sub Link 1</a></li>
	<li><a href='#'>Sub Link 2</a></li>
	<li><a href='#'>Sub Link 3</a></li>
	<li><a href='#'>Sub Link 4</a></li>
	</ul>
</li>
<li><a href='#'>Down</a>
	<ul>
	<li><a href='#'>Sub Link 1</a></li>
	<li><a href='#'>Sub Link 2</a></li>
	<li><a href='#'>Sub Link 3</a></li>
	<li><a href='#'>Sub Link 4</a></li>
	</ul>
</li>
<li><a href='#'>CSS</a>
	<ul>
	<li><a href='#'>Sub Link 1</a></li>
	<li><a href='#'>Sub Link 2</a></li>
	</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com Horizontal Easy DropDown CSS menu */

.drop_menu {
	background:#005555;
	padding:0;
	margin:0;
	list-style-type:none;
	height:40px;
	background-image:url('bg.jpg');
}
.drop_menu li { float:left; }
.drop_menu li a {
	padding:12px 20px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:12px arial, verdana, sans-serif;
	border-right:1px solid #75809a;
}

/* Submenu */
.drop_menu ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#75809a;  }
.drop_menu li:hover ul {
	left:0px;
	top:38px;
	background:#75809a;
	padding:0px;
}

.drop_menu li:hover ul li a {
	padding:10px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#75809a;
}
.drop_menu li:hover ul li a:hover { background:#005555;  }

Previous page: Simple Horizontal Drop Down Menu

Next page: CSS Menu with images Dark