标签：
<!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}
#nav{ height:30px; border: 1px solid #666; background: #999; line-height:30px}
#nav 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}
#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>
<body>
<!--方法一-->
<div id="nav">
<li><a href="#" class="menu">测试</a></li>
<li><a href="#" class="menu">测试</a></li>
<li><a href="#" class="menu">测试</a></li>
<li><a href="#" class="menu">测试</a></li>
<li><a href="#" class="menu">测试</a></li>
</div>
<div class="clear"></div>
<!--方法二-->
<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>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/robt/p/4633712.html
