只用css的hover显示下拉菜单

这次我们只用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。

是不是很简单。

 

posted @ 2016-04-21 16:50  寅春树  阅读(600)  评论(0)  编辑  收藏  举报