純css下拉菜單2

頁面代碼如下：

<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顯示*/