这次我们只用css来实现一个下拉菜单的效果，不用一点JS代码：
先看效果：
看代码：HTML
<body> <div class="one">下拉菜单<b></b> <div class="two"> <a href="">一</a> <a href="">二</a> <a href="">三</a> <a href="">四</a> <a href="">五</a> </div> </div> </body>
CSS代码：
*{margin:0px;padding:0px;} a{text-decoration: none;} .one{width:200px;height:40px;background:#999;margin:0 auto;text-align: center;line-height: 40px;color:#fff;position: relative;margin-top:40px;} .two{width:100%;height:auto;overflow: hidden;position: absolute;display: none;} .two a{height:40px;line-height: 40px;display: block;text-align: center;background: #EAEAEA;border-bottom: 1px solid #D0D0D0;} .one:hover .two{display: block;} .one b{width:40px;height:40px;background: url(../img/arrow.gif) no-repeat center top;display: block;float:right;} .one:hover b{width:40px;height:40px;background: url(../img/arrow.gif) no-repeat center -40px;display: block;float:right;}
这里用到一个一般很难想到的用法，就是 hover后面再加参数，这样就表示，鼠标放上去的时候改变改div下面的某模块的css，如上面例子，.one:hover .two就表示当鼠标放到one上时修改one包含的div为two的css。
是不是很简单。