动态实现简单的二级菜单

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

 <!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. 如何利用Excel设计一个唱票统计系统？

    具体操作如下: 首先需要一个如下的数据结构. 唱票数G列区域,不能手动输入候选人票数,这样很不方便,所以我们需要一个窗体控件,用点击鼠标的方法来实现唱票.在“开发工具-插入-数值调节钮”下图3处,然后 ...

  2. 我要穿越，干翻 “烂语言” JavaScript！

    更多精彩文章,尽在码农翻身 我是一个线程 TCP/IP之大明邮差 一个故事讲完Https CPU 阿甘 Javascript: 一个屌丝的逆袭 微服务把我坑了 如何降低程序员的工资? 程序员,你得选准 ...

  3. cc30a_demo-CppPrimer_友元与继承-txwtech友元关系不能继承-要明确授予友元

    //友元可以访问类的private与protected成员//友元关系不能继承-要明确授予友元 #include <iostream>//CppPrimer_友元与继承-txwtech-- ...

  4. 从 0 开始机器学习 - 神经网络反向 BP 算法！

    最近一个月项目好忙,终于挤出时间把这篇 BP 算法基本思想写完了,公式的推导放到下一篇讲吧. 一.神经网络的代价函数 神经网络可以看做是复杂逻辑回归的组合,因此与其类似,我们训练神经网络也要定义代价函 ...

  5. java android 序列号serializable和parcelable

    why 为什么要了解序列化?—— 进行Android开发的时候,无法将对象的引用传给Activities或者Fragments,我们需要将这些对象放到一个Intent或者Bundle里面,然后再传递. ...

  6. Jmeter系列（32）- 详解 CSV 数据文件设置

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 了解一哈什么是 CSV 文件 为了实现 ...

  7. javadoc导出成word文档

    刚刚上次弄完了一个坑爹的任务,这次我领导又给我一个让人脑瓜子疼的任务了. 基本上客户他在验收我们系统的时候,都会要求我们编写相关的文档,这次也不例外. 只是这次的客户要求我们给出接口文档.不仅是要整个 ...

  8. 【秒懂Java】【第1章_初识Java】01_编程语言

    各位小伙伴们好哇!从今日起,我将开始更新<秒懂Java>系列文章,从0开始讲解Java的方方面面,后面也将推出配套的视频版,欢迎大家保持关注! 我会尽力办到:在保证通俗易懂的同时,不丢失知 ...

  9. python自学之基础知识

    python学习笔记 列表的添加拓展 列表的批量添加 用for循环可以批量添加 list=['李雷雷','韩梅梅',180,110] for i in rang(3): list.append(i) ...

  10. 扫描U盘

    编辑器加载中...int CSendUDiskDlg::SearchUDisk(void) { int nCount, i; char szDriver[3]; nCount = 0; szDrive ...