<!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>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:18px;}
li{ list-style:none;}
#nav{ position:relative; width:600px; margin:0 auto 10px; height:22px;}
#nav ul{ position:absolute;}
#nav ul li{ float:left; display:inline; width:120px; height:18px; padding-top:4px; overflow:hidden; margin:0 2px; text-align:center; background:#F5F5F5; color:#990; border:1px solid #EEE8DD; cursor:pointer; }
#nav ul .nav-on{height:auto;}
#nav ul li ul{ position:static;}
#nav ul li ul li{ display:block; padding:0; margin:0; height:27px; border:none;}
#nav ul li ul li a{ display:block; height:18px; padding:5px 0 4px; color:#666; text-decoration:none;}
#nav ul li ul li a:hover{ background:#539D26; color:#fff;}
.content { background:#ccc; width:600px; height:200px; margin:0 auto; }
</style>
</head>
<body>
<div id="nav">
<ul>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">我的首页
<ul>
<li><a href="#">我爱CSS</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">社区圈子
<ul>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">我的短信
<ul>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li onmouseover="this.className='nav-on'" onmouseout="this.className=''">账户管理
<ul>
<li><a href="#">我爱CSS</a></li>
<li><a href="#">我的首页</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</li>
</ul>
</div>
<div class="content">这个div是测试nav合适与否的关键</div>
</body>
</html>