css 实现动态二级菜单
动态实现简单的二级菜单
当鼠标放到一级标签上时，鼠标会变成小手的形状 展示二级菜单，源码如下，复制即可直接使用
<!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 实现动态二级菜单的更多相关文章
- python 全栈开发，Day109(客户管理之动态"二级"菜单)
昨日内容回顾 1. 权限有几张表? 2. 简述权限流程? 3. 为什么要把权限放入session? 4. 静态文件和模块文件 5. 相关技术点 - orm查询 - 去空 - 去重 - 中间件 - in ...
- CSS之实现二级菜单动态出现
一直觉得二级菜单的出现效果仅仅有js才干控制.今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用CSS来控制,原来对CSS是静态的东西一直是误解它了,CSS也能够实现动态的效果 ...
- 个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- crm 动态一级二级菜单
之前代码菜单是写是的 如何 让他 动态 生成了 首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...
- 巨蟒django之权限7:动态生成一级&&二级菜单
内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html和css实现一级菜单和二级菜单学习笔记
实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
随机推荐
- 开窗函数_ROW_NUMBER() / RANK() / DENSE_RANK() / NTILE() ------4个排名函数训练_1
排名函数(训练,其实从SQL2005时就已经被引入) /*SQL Server 2012从零开始学_7.8 排序函数*/ --DROP TABLE fruits GO Create table fr ...
- excel筛选重复项代码
Sub test()'updateby Extendoffice 20151030 Dim xRng As Range Dim xTxt As String On Error Res ...
- 前台页面id为空--驼峰命名映射
错误: 前台页面id为空,或其他数据映射问题(方案2) 原因: java的bean类属性和数据库字段命名不一致,查询的时候就不能把数据封装进bean类里, 在数据库字段命名规范中,通常使用下划线“_ ...
- ROC曲线 vs Precision-Recall曲线
深入理解对比两个曲线各自的特性和相互的差异需要花不少时间研读一些国外的技术博客与相关paper,暂时先列出下面这么多,这部分后续可以继续补充. ROC曲线和AUC的定义可以参看“ROC曲线于AUC”, ...
- Python 为什么不支持 i++ 自增语法，不提供 ++ 操作符？
在 C/C++/Java 等等语言中,整型变量的自增或自减操作是标配,它们又可分为前缀操作(++i 和 --i)与后缀操作(i++ 和 i--),彼此存在着一些细微差别,各有不同的用途. 这些语言的使 ...
- 深入理解Java闭包概念
闭包又称词法闭包 闭包最早定义为一种包含<环境成分>和<控制成分>的实体. 解释一:闭包是引用了自由变量的函数,这个被引用的变量将和这个函数一同存在. 解释二:闭包是函数和相关 ...
- weblogic高级进阶之ssl配置证书
1.首先需要明白ssl的原理 这里我们使用keytool的方式为AdminServer配置ssl证书 配置证书的方式如下所示: C:\Users\Administrator\Desktop\mykey ...
- 主线程用afxBeginThread()创建多个线程安全退出的办法
HANDLE hand[]; CCriticalSection m_crisecoin; CEvent m_event; struct Student { int nNO; int nYear; CW ...
- 如何在Vim中更改颜色和主题
大家好,我是良许. Vim是我们在Linux中非常常用的一款文本编辑器.Vim 是一款免费.开源的文本编辑器,它的功能和许多其他的文本编辑器大致相同,比如 Sublime 和 Notepad++ .V ...
- Kubernetes 两步验证 - 使用 Serverless 实现动态准入控制
作者:CODING - 王炜 1. 背景 如果对 Kubernetes 集群安全特别关注,那么我们可能想要实现这些需求: 如何实现 Kubernetes 集群的两步验证,除了集群凭据,还需要提供一次性 ...