只用css的hover显示下拉菜单

最新推荐文章于 2024-05-31 15:07:56 发布

weixin_30621959

最新推荐文章于 2024-05-31 15:07:56 发布

阅读量929

点赞数

原文链接：http://www.cnblogs.com/chunshu/p/5417638.html

版权

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

是不是很简单。

转载于:https://www.cnblogs.com/chunshu/p/5417638.html

weixin_30621959

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
只用css的hover显示下拉菜单

这次我们只用css来实现一个下拉菜单的效果，不用一点JS代码：先看效果：看代码：HTML<body> <div class="one">下拉菜单<b></b> <div class="two"> <a href="">一</...
复制链接

扫一扫