純CSS下拉菜單

頁面代碼如下：

  <div id="menu">
    <ul id="nav">
      <li><a href="#">一級下拉一</a>
      <ul>
        <li><a href="">二級下拉1-1</a></li>
        <li><a href="">二級下拉1-2</a></li>
        <li><a href="">二級下拉1-3</a></li>
        <li><a href="">二級下拉1-4</a></li>
      </ul>
      </li>
      <li><a href="">一級下拉二</a>
      <ul>
        <li><a href="">二級下拉2-1</a></li>
        <li><a href="">二級下拉2-2</a></li>
        <li><a href="">二級下拉2-3</a></li>
        <li><a href="">二級下拉2-4</a></li>
      </ul>
      </li>
    </ul>
  </div>

CSS代碼如下：

*{margin:0;padding:0;border:0;}
body{font-family: :arial;font-size: 12px;}
#nav{line-height: 24px;list-style: none;background: #666;margin:50px 0 0 100px;}
#nav a{display: block;width: 90px;text-align: center;color:#666;text-decoration: none;}/*一級目錄鏈接display*/
#nav a:hover{color:#fff;text-decoration: none;font-weight: bold;}
#nav li{float: left;width: 90px;background: #ccc;}
#nav li a:hover{background: #999;}
#nav li ul{line-height: 27px;list-style:none;text-align: left;left: -999em;width: 180px;position: absolute;}/*二級目錄絕對定位*/
#nav li ul li{float: left;width: 180px;background: #efefef;}
#nav li ul a{display: block;width: 156px;text-align: left;padding-left: 24px;overflow: hidden;}/*清除多餘邊角*/
#nav li ul a:hover{color: #f3f3f3;text-decoration: none;font-weight: normal;background: #c00;}
#nav li:hover ul{left: auto;}/*標籤僞類，鼠標放放上去，變顏色*/