纯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;}/*标签伪类，鼠标放放上去，变颜色*/