zoukankan      html  css  js  c++  java
  • 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时。

    主菜单hover时,显示子菜单;主菜单没有hover时,不显示子菜单

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title>下拉菜单</title>
    <link type="text/css" rel="stylesheet" href="./css/reset.css" />
    <style>
    /* no hover 状态 */
    .xiala_menu{
        width:30%; /* 调整宽度 */
        margin:0 auto;
        text-align:center;
    }
    .xiala_menu li{
        width:80px;
        float:left;
        background:#e5e5e5;
        margin-right:1px;
    }
    .xiala_menu li ul{
        display:none;
    }
    /* hover 状态 */
    .xiala_menu li:hover ul{
        display:block;
    }
    .xiala_menu li:hover ul li{
        background:#ccc;
        margin:1px 0;
        cursor:pointer;
    }
    
    .xiala_menu li:hover ul li:hover{
        color:red;
        background:#bdbdbd;
    }
    </style>
    </head>
    
    <body>
    <div class="xiala_wrap">
        <ul class="xiala_menu clearfix">
            <li>
                菜单1
                <ul>
                    <li>
                        菜单11
                    </li>
                    <li>
                        菜单11
                    </li>
                    <li>
                        菜单11
                    </li>
                    <li>
                        菜单11
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>
  • 相关阅读:
    7
    6
    Robot Motion -- 机器人路径规划
    Delaunay Triangulation
    Voronoi Diagram -- 泰森多边形 (维诺图)
    Window query -- 区间线段包含问题
    5
    es6模块化
    js模块化编程之彻底弄懂CommonJS和AMD/CMD!
    混合开发菜鸟级别总结笔记 内容来自百度一下,你就知道
  • 原文地址:https://www.cnblogs.com/lhat/p/4762406.html
Copyright © 2011-2022 走看看