css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做怎么怎么做，代码简洁质量轻巧 。下面是本人用纯css制作的三级下拉菜单效果：
思路很简单，三级菜单直接用三层嵌套的ul布局：
【纯css制作三级下拉菜单】
除一级ul外其余ul隐藏，当鼠标划过第一层li时该li下的下一级ul（二级菜单）显示
.nav>ul>li ul{display: none;}.nav>ul>li:hover>a+ul{/*鼠标划过一级菜单的时候二级菜单显示*/display: block;}
当鼠标划过第二层li时该li下的下一级ul（三级菜单）显示
.nav>ul>li>ul>li:hover ul{/*鼠标划过二级菜单的时候对应的三级菜单显示*/display: block;}
基本思路就是这样，如果需要更多的特效，自己额外添加样式就可以了，下面附上图片中例子的完整代码：
三级下拉菜单body,*{margin: 0px;padding: 0px;font-size: 0px;color: #555;box-sizing:border-box;}ul{list-style: none;}.banner{width: 100%;height: 100px;}.nav{width: 100%;height: 60px;border: 0px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;background-color: #fff;}.nav>ul{width: 80%;margin:0 auto;}.nav>ul:after{display: block;content: '';clear: both;}.nav>ul>li{display: block;width: 140px;height: 100%;padding-left: 20px;float: left;text-align: center;background: url(img/bg.gif) no-repeat;background-position: 21px 22px;}.nav>ul>li:hover{background-color: #fff5f5;}.nav>ul>li a{display: inline-block;width: 100%;height: 100%;padding: 10px 20px;font-size: 18px;line-height: 40px;text-decoration:none;}.nav>ul>li ul{display: none;}.nav>ul>li:hover>a+ul{/*鼠标划过一级菜单的时候二级菜单显示*/display: block;}.nav>ul>li>ul{width: 160px;height: auto;border: 1px solid #eee;border-radius:3px;position: relative;top: 0px;left: -20px;}.nav>ul>li>ul>li,.nav>ul>li>ul>li>ul>li{display: block;width: 100%;height: 60px;text-align: center;border-bottom: 1px solid #eee;}.nav>ul>li>ul>li:last-child,.nav>ul>li>ul>li>ul>li:last-child{border: 0px;}.nav>ul>li>ul>li:hover,.nav>ul>li>ul>li>ul>li:hover{/*与用户的交互不能少*/background: #fff9f9;}.nav>ul>li>ul>li:hover ul{/*鼠标划过二级菜单的时候对应的三级菜单显示*/display: block;}.nav>ul>li>ul>li>ul{width: 160px;height: auto;border: 1px solid #eee;border-radius:3px;position: relative;top: -60px;left: 100%;}
