动态实现简单的二级菜单

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

     <style>

         * {margin: 0; padding: 0;}

         ul { list-style: none;}

         div {

             width: 100%;

             height: 50px;

             background-color: #ccc;

         }

         .first {

             width: 100px;

             height: 50px;

             float: left;

             margin-right: 70px;

             /* background-color: pink; */

             cursor: pointer;

             text-align: center;

             line-height: 50px;

             border-radius: 15px;

         }

         .second li{

             width: 80px;

             height: 50px;

             background-color: blue;

             border-radius: 50%;

             margin-top: 10px;

         }

         .second {

             display: none;

         }

         .first:hover .second{

             display: block;

             cursor: pointer;

         }

         .first:hover {

             background-color: pink;

         }

     </style>

 <body>

     <div>

         <ul>

             <li class="first">

                 <p>一级标签</p>

                 <ul class="second">

                     <li>二级标签</li>

                     <li>二级标签</li>

                 </ul>

             </li>

             <li class="first">

                 <p>一级标签</p>

                 <ul class="second">

                     <li>二级标签</li>

                     <li>二级标签</li>

                 </ul>

             </li>

         </ul>

     </div>

 </body>

 </html>

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

css 实现动态二级菜单的更多相关文章

  1. python 全栈开发，Day109(客户管理之动态"二级"菜单)

    昨日内容回顾 1. 权限有几张表? 2. 简述权限流程? 3. 为什么要把权限放入session? 4. 静态文件和模块文件 5. 相关技术点 - orm查询 - 去空 - 去重 - 中间件 - in ...

  2. CSS之实现二级菜单动态出现

    一直觉得二级菜单的出现效果仅仅有js才干控制.今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用CSS来控制,原来对CSS是静态的东西一直是误解它了,CSS也能够实现动态的效果 ...

  3. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  4. crm 动态一级二级菜单

    之前代码菜单是写是的 如何 让他 动态 生成了  首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...

  5. 巨蟒django之权限7:动态生成一级&&二级菜单

    内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...

  6. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. html和css实现一级菜单和二级菜单学习笔记

    实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  8. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  9. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

随机推荐

  1. HTMLTestRunner生成html测试报告

    使用:把文件放到项目某个文件夹中,引入方式如下 import unittest import env import vendor.report.HTMLTestRunnerNew as HTMLTes ...

  2. cb50a_c++_STL_算法_局部排序partial_sort

    cb50a_c++_STL_算法_局部排序partial_sort partial_sort(b,se,e)排序一部分,begin,source end,endcout << " ...

  3. CVE-2017-7269-iis远程溢出漏洞复现

    ##01漏洞描述 cve_2017_7269漏洞属于高危漏洞,是由Zhiniang Peng和Chen Wu(华南理工大学信息安全实验室,计算机科学与工程学院)发现的.IIS 6.0开启Webdav服 ...

  4. Jmeter服务器监控技术

    meter-plugins.org推出了全新的Plugins Manager,对于其提供的插件进行了集中的管理, 将 ServerAgent-xxx.jar上传被测服务器解压 进入目录 ServerA ...

  5. linux 系统文件目录颜色及特殊权限对应的颜色

    什么决定文件目录的颜色和背景?  颜色  说明  栗子  权限 白色 表示普通文件   蓝色 表示目录  绿色 表示可执行文件 浅蓝色 链接文件 黄色 表示设备文件 红色   表示压缩文件 红色闪烁 ...

  6. Java中的I/O流全汇总，所有的I/O就一张图

    放大再看,注意视力!哈哈   一口吃不成胖子,一点一点的看: 大家都是文化人,拿图要指明出处!!!  头上↑那框,对,就是那 使用的是XMind软件画的,要源文件吗? 在这里:https://gith ...

  7. postman写测试用例

    接口测试引用聚合数据(手机号码归属地)接口 1,点击postman左上角红框+New Collection来创建文件,用来存放测试用例 文件名为号码归属地查询(随意)  2,右击文件选择Add Req ...

  8. python三大神器之fabric

    Fabric Fabric是一个python的远程执行shell的库,同时它也是一个命令行工具.它提供了丰富的同 SSH 交互的接口,可以用来在本地或远程机器上自动化.流水化地执行 Shell 命令. ...

  9. Selenium WebDriver使用

    目录 介绍 selenium webdriver chromedriver下载安装 1.下载 2.使用 3.测试 WebDriver常用操作 1.浏览器操作 2.窗口和弹框操作 3.cookies 操 ...

  10. （私人收藏）[开发必备]HTML5最全快速查找离线手册（可查询可学习，带实例）

    [开发必备]HTML5最全快速查找离线手册(可查询可学习,带实例) HTML5最全快速查找离线手册:https://pan.baidu.com/s/19seE8TJQSx4IsWgXtKQS0Aj9y ...