zoukankan      html  css  js  c++  java
  • 用css写出下拉框(代码转自wq群)

    做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框。

    <style>
    /* css*/
    #body{
    float: left;
    }
    #xialakuang{
    background-color:#f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*设置下拉框的阴影*/
    display: none;
    }
    #body a{
    display: block;
    padding:10px 15px;
    color: #C4C4C4;
    line-height: 20px;
    font-size: 12px;
    }
    #body a:link{
    text-decoration: none;
    background-color: black;
    }
    #body a:hover{
    background-color:#3E3D3D;
    color: white;
    }33 .anniu{
    background-color: black;
    108px;
    height: 40px;
    color: white;
    border: none;
    cursor: pointer;
    }
    #body:hover #xialakuang{
    display: block; /*鼠标放在div上时使下拉框显示,放在这里的目的是在鼠标往下拉框移动时下拉框不会消失*/
    }
    #body:hover .anniu{
    background-color:#3E3D3D;
    }
    </style>
    <body>
    <div id="body">
    <button class="anniu">移动下拉(css)</button>
    <div id="xialakuang">
    <a href="">我的主页</a>
    <a href="">我的消息</a>
    <a href="">我的等级</a>
    <a href="">会员中心</a>
    <a href="">个人设置</a>
    <a href="">退出</a>
    </div>
    </div>
    </body>

  • 相关阅读:
    第二次作业
    第四次作业
    第三次作业
    第二次作业
    第一次作业
    第四次作业
    第三次作业
    第二次作业
    第一次大学作业
    第四次作业
  • 原文地址:https://www.cnblogs.com/Heng23/p/7746075.html
Copyright © 2011-2022 走看看