zoukankan      html  css  js  c++  java
  • css 实现动态二级菜单

    动态实现简单的二级菜单

     当鼠标放到一级标签上时,鼠标会变成小手的形状 展示二级菜单,源码如下,复制即可直接使用

    复制代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <title>Document</title>
     7     <style>
     8         * {margin: 0; padding: 0;}
     9         ul { list-style: none;}
    10         div {
    11              100%;
    12             height: 50px;
    13             background-color: #ccc;
    14         }
    15         .first {
    16              100px;
    17             height: 50px;
    18             float: left;
    19             margin-right: 70px;
    20             /* background-color: pink; */
    21             cursor: pointer;
    22             text-align: center;
    23             line-height: 50px;
    24             border-radius: 15px;
    25         }
    26         .secondDzjf4qrWP li{
    27              80px;
    28             height: 50px;
    29             background-color: blue;
    30             border-radius: 50%;
    31             margin-top: 10px;
    32         }
    33         .second {
    34             display: none;
    35         }
    36         .first:hover .second{
    37             display: block;
    38             cursor: pointer;
    39         }
    40         .first:hover {
    41             background-PqTjajDcolor: pink; 
    42         }
    43     </style>
    44     
    45 <body>
    46     <div>
    47         <ul>
    48             <li class="first">
    49                 <p>一级标签</p>
    50                 <ul class="second">
    51                     <li>二级标签</li>
    52                     <li>二级标签</li>
    53                 </ul>
    54             </li>
    55 
    56             <li class="first">
    57                 <p>一级标签</p>
    58                 <ul class="second">
    59                     <li>二级标签</li>
    60                     <li>二级标签</li>
    61                 </ul>
    62             </li>
    63         </ul>
    64     </div>
    65     
    66 </body>
    67 </html>

    复制代码

    如果读者有不明白的地方,或建议可直接留言,定会一一解答。

    不停学习,热爱是源源不断的动力。

  • 相关阅读:
    c++ builder 获取命令行参数
    c++ builder 只允许程序运行一个实例
    jQuery学习笔记(三)
    jQuery学习笔记(二)
    jQuery实现一个弹出登陆层的效果
    jQuery学习笔记(一)
    20117月
    201112学习
    21125
    211211
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13309075.html
Copyright © 2011-2022 走看看