给你个源码作为参考 用纯CSS+HTML编写而成
____________________________________
Suckerfish下拉菜单
<!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>
<title>Untitled Page</title>
<style type="text/css">
ul.nav,ul.nav ul
{
margin:0;
padding:0;
list-style-type:none;
font:left;
}
ul.nav li
{
float: left;
width: 8em;
background-color: #8BD400;
}
ul.nav li ul
{
width: 8em;
position: absolute;
left: -999em;
}
.nav li:hover ul
{
left: auto;
}
ul.nav a
{
display: block;
color: #2B3F00;
text-decoration: none;
padding: 0.3em 1em;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}
ul.nav li li a
{
border-bottom: 1px solid #486B02;
border-top: 1px solid #486B02;
border-right: 0;
border-left: 0;
}
ul.nav li:last-child a
{
border-right: 0;
border-bottom: 0;
}
ul a:hover, ul a:focus
{
color: #E4FFD3;
background-color: #6DA203;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">SilverBack</a></li>
<li><a href="#">Font Deck</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consultancy</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>