简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  • 全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
    您现在的位置:首页 >> JS >> 内容

    利用纯css做一个下拉菜单功能的示例代码

    内容摘要:!DOCTYPE htmlhtmlhead meta charset='UTF-8' meta name='viewport' content='width=device-width, initial-scale=1.0' meta http-equiv='X-UA-Compatible' content='ie=edge'styleli{list-styl......

      <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>

    li{

    list-style: none;

    height: 28px;

    }

    #menu{

    display: inline-block;

    }

    #menu #list {

    max-height: 0;

    transition: max-height 0.25s ease-out;

    overflow: hidden;

    background: #f5f4f4;

    width: 80px;

    margin: 0;

    padding: 0;

    text-align: center;

    }

    #menu:hover #list {

    max-height: 200px;

    transition: max-height 0.25s ease-in;

    width: 80px;

    margin: 0;

    padding: 0;

    }

    .button{

    height: 32px;

    width: 80px;

    margin-top: 6px;

    border-radius: 4px;

    color: #fff;

    padding-left: 0;

    padding-right: 0;

    line-height: 32px;

    background: #E33E33;

    text-align: center;

    }

    </style>

    </head>

    <body>

    <div id="menu">

    <div class="button">更多信息</div>

    <ul id="list">

    <li>个人中心</li>

    <li>我的博客</li>

    <li>设置</li>

    <li>退出登陆</li>

    <li>注销</li>

    </ul>

    </div>

    </body>

    </html>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/9/2 发布时间:17:14:54 点击:427 
  • 上一篇:html直接引用vue和element-ui的方法
  • 下一篇:javaScript实现世界各地时间显示
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.35 Build 20.8.26(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2020