DIV+CSS制作的导航菜单

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS制作的导航菜单</title>
<style type="text/css">
.clear{ clear:both}
#but{ height:30px; background: #666; line-height:30px}
#but ul{ margin:0; display:0}
#but ul li{ float:left; display:block; width:100px; list-style:none}
.menu:link{ color:#FFFFFF; font-size:12px; text-decoration:none;display:block; text-align:center; line-height:30px}
.menu:hover{ background:#000; width:100px; height:30px; color:#FFFF00; display:block; text-align:center; line-height:30px}
/**/

#nav{ height:30px; background: #990000; line-height:30px}
#nav ul{ margin:0; display:0}
#nav ul li{ float:left; width:100px; list-style:none}
#nav ul li a{ color:#FFFFFF; font-size:12px; text-decoration:none;display:block; text-align:center; line-height:30px}
#nav ul li a:hover{ background:#000; width:100px; height:30px; color:#FFFF00; display:block; text-align:center; line-height:30px}
#nav ul li ul li{ float:none; text-align:center;background:#ccc; width:100px; height:30px}
#nav ul li ul li a{ color:#0000Ff; font-size:12px;}
#nav ul li ul li a:hover{ color:#FFF; background:#990000;}
#nav ul li ul{ display: none; position:absolute; margin:0; padding:0}
#nav ul li ul a:hover{ display:block}
#nav ul li:hover ul{ display:block}

/**/
#nav2{ width:100px; height:30px; float:left; text-align:center; line-height:30px}
.menu2:link{ color:#999900; font-size:12px}
.menu2:hover{ color:#fff;background:blue; display:block; height:30px; width:100px}

.nav2bg{ height:30px; background-color: #E3E3E3; }
.nav2bg:hover{ background:yellow; cursor: default}

</style>
</head>

<div class="nav2bg">
<div id="nav2"><a href="#" class="menu2">测试</a></div>
<div id="nav2"><a href="#" class="menu2">测试</a></div>
<div id="nav2"><a href="#" class="menu2">测试</a></div>
<div id="nav2"><a href="#" class="menu2">测试</a></div>
<div id="nav2"><a href="#" class="menu2">测试</a></div>
</div>
<div class="clear"></div>

<p></p>

<div id="nav">
<ul>
<li><a href="#">测试一</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">测试二</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">测试三</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">测试四</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">测试五</a></li>
</ul>
</div>
<div class="clear"></div>
</body>
</html>

DIV+CSS制作的导航菜单

推荐阅读