页面代码如下:
<div id="nav">
<ul>
<li>我的首页
<ul>
<li><a href="">我的PNG</a></li>
<li><a href="">我的GIF</a></li>
<li><a href="">我的JPG</a></li>
<li><a href="">我的AVI</a></li>
</ul>
</li>
<li>我的首页
<ul>
<li><a href="">我的PNG</a></li>
<li><a href="">我的GIF</a></li>
<li><a href="">我的JPG</a></li>
<li><a href="">我的AVI</a></li>
</ul>
</li>
<li>我的首页
<ul>
<li><a href="">我的PNG</a></li>
<li><a href="">我的GIF</a></li>
<li><a href="">我的JPG</a></li>
<li><a href="">我的AVI</a></li>
</ul>
</li>
<li>我的首页
<ul>
<li><a href="">我的PNG</a></li>
<li><a href="">我的GIF</a></li>
<li><a href="">我的JPG</a></li>
<li><a href="">我的AVI</a></li>
</ul>
</li>
</ul>
</div>
CSS代码如下:
body{background: #fff;font-size: 12px;}
ul{list-style: none;margin:0;padding:0;}
#nav>ul>li{width:120px;border:1px solid #eee;background: #fafafa;padding:4px 0;text-align: center;color: #999;cursor: pointer;position: relative;float: left;margin:10px;}/*在一级目录上做相对定位*/
#nav>ul>li:hover{background: #f1fbec;border:1px solid #9cdd75;color: #666;border-bottom: none;}/*标签伪类,鼠标放上去变颜色*/
#nav>ul>li>ul{border:1px solid #9cdd75;background: #f1fbec;position: absolute;top: 21px;left: -1px;border-top:none;display: none;}/*用display先隐藏起来二级菜单,二级菜单还得做绝对定位,与一级相对定位对应起来*/
#nav>ul>li>ul>li{width: 120px;padding:4px 0;}
#nav>ul>li>ul>li a{color: #666;text-decoration: none;display: inline-block;width: 100px;padding:4px;}/*内联块,让整个链接背景一样*/
#nav>ul>li>ul>li a:hover{color:#333;text-decoration: none;font-weight: bold;background: lightgreen;}
#nav>ul>li:hover ul{display: block;}/**当父类li放上去,子类的ul显示*/