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>

  • 相关阅读:
    01前端-html
    2-3程序流程
    2-2视频缓存池
    2-1图像像素格式深度理解
    3.1.1 文件系统介绍
    3.1.4 文件属性
    CentOS开放端口的方法
    宝塔linux面板命令大全
    如何卸载Win10 RS3上预装的office2016
    win10家庭版升级专业版的两种方法和密钥
  • 原文地址:https://www.cnblogs.com/Heng23/p/7746075.html
Copyright © 2011-2022 走看看