css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是本人用纯css制作的三级下拉菜单效果：
思路很简单，三级菜单直接用三层嵌套的ul布局：
<div class="nav"><ul><li><a href="#">电器</a><ul><li><a href="#">家用电器</a><ul><li><a href="#">生活电器</a></li><li><a href="#">生活电器</a></li><li><a href="#">个人护理</a></li></ul></li></ul></li></ul></div>
除一级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;}
基本思路就是这样，如果需要更多的特效，自己额外添加样式就可以了，下面附上图片中例子的完整代码：
<DOCTYPE html><html><head><title>三级下拉菜单</title><meta charset="utf-8"><style type="text/css">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%;}</style></head><body><div class="banner"></div><div class="nav"><ul><li><a href="#">电器</a><ul><li><a href="#">家用电器</a><ul><li><a href="#a" target="_self">生活电器</a></li><li><a href="#a" target="_self">生活电器</a></li><li><a href="#a" target="_self">个人护理</a></li></ul></li><li><a href="#">数码</a><ul><li><a href="#a" target="_self">平板电脑</a></li><li><a href="#a" target="_self">数码相机</a></li><li><a href="#a" target="_self">电玩动漫</a></li></ul></li><li><a href="#">手机</a></li></ul></li><li><a href="#">服饰</a><ul><li><a href="#">男装</a><ul><li><a href="#a" target="_self">商务男装</a></li><li><a href="#a" target="_self">休闲运动</a></li></ul></li><li><a href="#">女装</a><ul><li><a href="#a" target="_self">新品</a></li><li><a href="#a" target="_self">明星网红</a></li><li><a href="#a" target="_self">时尚穿搭</a></li></ul></li><li><a href="#">童装</a><ul><li><a href="#a" target="_self">演出服</a></li><li><a href="#a" target="_self">运动装</a></li><li><a href="#a" target="_self">连衣裙</a></li></ul></li></ul></li><li><a href="#">食品</a><ul><li><a href="#">生活零食</a><ul><li><a href="#a" target="_self">干果</a></li><li><a href="#a" target="_self">辣条</a></li><li><a href="#a" target="_self">薯片</a></li></ul></li></ul></li></ul></div></body></html>
