zoukankan      html  css  js  c++  java
  • 下拉菜单 方法实例

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <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;
    }
    .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>
    </head>

    <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>

    </html>

  • 相关阅读:
    ASP.NET 学习日志
    igoogle 小工具
    nios ann 语音识别
    ASP 3.5 读书笔记
    C# delegate and event 续
    paper
    网站白痴的 ASP.NET website 学习日志
    盒子模型
    将对象序列化成json
    不错的Oracle 存储过程例子
  • 原文地址:https://www.cnblogs.com/wangyufei123/p/7746181.html
Copyright © 2011-2022 走看看