动态实现简单的二级菜单

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

 <!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. CollectionView的cell长按事件实现

    原生cell没有长按事件,我们需要使用手势识别来绑定CollectionView.创建并绑定CollectionView如下: (void)viewDidLoad { [super viewDidLo ...

  2. Stylus 之 网教通直播间整修

    暗色模式 效果 Mozilla 格式源代码 @-moz-document domain("fj.101.com") { * { transition: all .3s; } #wj ...

  3. CentOS Linux release 7.7.1908 (Core)--rabbitmq安装

    1.连接服务器,输入账号和密码,密码输入的时候是看不见的,只管输就行,然后回车. 2．安装Erlang,RabbitMQ是用这门语言写的,所以要安装他. 3.安装filezilia就是win和linu ...

  4. 如何用 Python 和 API 收集与分析网络数据？

    摘自 https://www.jianshu.com/p/d52020f0c247 本文以一款阿里云市场历史天气查询产品为例,为你逐步介绍如何用 Python 调用 API 收集.分析与可视化数据.希 ...

  5. 消息队列——RabbitMQ的基本使用及高级特性

    文章目录 一.引言 二.基本使用 1. 简单示例 2. work queue和公平消费消息 3. 交换机 三.高级特性 1. 消息过期 2. 死信队列 3. 延迟队列 4. 优先级队列 5. 流量控制 ...

  6. WeChair项目Beta冲刺(7/10)

    团队项目进行情况 1.昨日进展    Beta冲刺第七天 昨日进展: 前后端并行开发,项目按照计划有条不絮进行 2.今日安排 前端:扫码占座功能和预约功能并行开发 后端:扫码占座后端逻辑开发,编码预约 ...

  7. Error: Cannot find module 'webpack'

    运行 npm start 报错 Error: Cannot find module 'webpack' 安装了 npm install --save-dev webpack cnpm install ...

  8. Java操作RockeMQ

    RocketMQ是阿里巴巴在2012年开源的分布式消息中间件,目前已经捐赠给Apache基金会,已经于2016年11月成为 Apache 孵化项目,相信RocketMQ的未来会发挥着越来越大的作用,将 ...

  9. SSH网上商城三

    现在我们要实现下面的需求: 当用户点击左侧二级菜单选项的时候,在右侧要显示对应的该二级菜单项下面存在哪些商品,例如点击潮流女装,要在右侧分页显示该潮流女装下对应哪些商品 1.要分页显示 首先要获得该二 ...

  10. 设计模式--Builder生成器模式

    如果文章中哪里有问题,希望各位大哥大姐指出,小弟十分感激. 正文 什么是生成器模式? 生成器模式就是把生产对象的过程进一步抽取.细化.独立.以往我们生产对象,可能就是在一个小作坊里面从头做到尾.现在用 ...