CSS代码：

*{margin:0; padding:0}
body{ font-size:12px; font-family:Arial,Helvetica,sans-serif;}
ul,li{ list-style:none outside;}
#nav{width:600px; height:30px; padding:0px 5px;}
.menu1{width:120px; height:23px; line-height:23px;float:left;text-align:center; font-weight:bold;margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999; border:1px solid #EEE8DD; overflow-y:hidden; cursor:hand}
.menu2{width:120px; height:auto;line-height:23px;float:left;text-align:center; font-weight:bold; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; cursor:hand; overflow-y:hidden}
.list{text-align:left; padding:4px; font-weight:normal}
.list a:link,.list a:visited{color:#336601; text-decoration:none;display:block;line-height:22px;}
.list a:hover{color:white; text-align:center;background-color:#539D26}
.list a:active{background-color:#BD06B4}

HTML代码：

<div id="nav">
<ul>
<li onmouseover="this.className='menu2'" onmouseout="this.className='menu1'">我的首页
<div>
<a href="">设计家园</a>
<a href="#">我的首页</a>
<a href="#">我的日志</a>
</div>
</li>
<li onmouseover="this.className='menu2'" onmouseout="this.className='menu1'">社区圈子
<div>
<a href="#">我的日志</a>
<a href="#">我的相册</a>
<a href="#">我的收藏</a>
</div>
</li>
<li onmouseover="this.className='menu2'" onmouseout="this.className='menu1'">我的短信
<div>
<a href="">设计家园</a>
<a href="#">我的相册</a>
<a href="#">我的收藏</a>
</div>
</li>
<li onmouseover="this.className='menu2'" onmouseout="this.className='menu1'">账户管理
<div>
<a href="">设计家园</a>
<a href="#">我的首页</a>
<a href="#">我的日志</a>
<a href="#">我的相册</a>
<a href="#">我的收藏</a>
</div>
</li>
</ul>
</div>