CSS-下拉导航条

Web网站中很多时候都会出现下拉导航条，有的是通过CSS实现，有的通过JavaScript插件实现，其实CSS实现起来比较简单,先来看一个简版的下拉菜单:

Html代码通过ul列表实现:

  <ul class="nav"> 
        <li>首页</li> 
        <li>产品</li> 
        <li>服务 
            <ul> 
                <li>设计</li> 
                <li>研发</li> 
                <li>交付</li> 
            </ul> 
        </li> 
        <li>关于我们 
            <ul> 
                <li>博客园</li> 
                <li>FlyElephant</li> 
                <li>keso</li> 
            </ul> 
        </li> 
    </ul> 

CSS代码如下:

 .nav {
     margin-left: 200px; 
     margin-top:200px; 
}
.nav li {
     float: left; 
     width: 150px; 
     background-color: #00C5CD; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     text-align: center; 
     border-right: 1px solid #fff; 
}
.nav li:last-child {
     border-right: none; 
}
.nav li ul {
     width: 150px; 
     position: absolute; 
     margin-top: 10px; 
     left: 9999px; 
}
.nav li ul li {
     background-color: #00EE00; 
     border-bottom: 1px solid #fff; 
}
.nav li:hover ul {
     left: auto; 
}