寻梦xunm

简单的一个实例html+ 纯Css下拉框
简单的一个实例html+ 纯Css下拉框HTML代码<div class="box"&g...
扫描右侧二维码阅读全文
07
2019/04

简单的一个实例html+ 纯Css下拉框

简单的一个实例html+ 纯Css下拉框

HTML代码

<div class="box">
    <div class="title">今日新闻</div>
    <div class="content">字菜单</div>
</div>

css代码

* {
    margin:0;
    padding:0;
}
.box {
    width:300px;
    margin:50px auto;
}
.title {
    height:55px;
    background-color:#efefef;
    text-align:center;
    line-height:55px;
}
.content {
    height:0px;
    background-color:#a1a1a1; 
    transition:all .3s linear;overflow: hidden;line-height:50px; text-align: center;
} 
.box:hover .content {
    height:200px;
}

火狐截图_2019-04-07T11-56-36.550Z.png

Last modification:April 7th, 2019 at 07:59 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment