HTML+CSS实现简单三级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级菜单练习</title>
</head>
<link rel="stylesheet" href="menu.css" type="text/css" />
<body>
<div>
<ul id="nav">
<li>
<a href="">一级菜单</a>
<ul>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">一级菜单1</a>
<ul>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单2</a>
<ul>
<li><a href="">三级菜单1</a>|<a href="">三级菜单2</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
<li>
<a href="">二级菜单</a>
<ul>
<li><a href="http://www.baidu.com" target="_blank">三级菜单3</a></li>
<li><a href="">三级菜单</a></li>
<li><a href="">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr>
<p>...</p>
</body>
</html>
*{
margin: 0px;
padding: 0px;
text-decoration: none;
list-style:none;
color: black;
}
a{
/*background-color: #aaa;*/
padding: 10px 20px;
font-size: 20px;
line-height: 44.3px;
font-weight: bold;
font-family: arial;
/*border: 1px solid black;*/
}
#nav>li>ul>li>a{
font-size: 18px;
}
#nav>li>ul>li>ul>li>a{
font-size: 16px;
}
#nav>li{
float: left;
}
#nav>li:hover>ul{
display: block;
position: absolute;
}
#nav>li>ul>li{
position: relative;
}
#nav>li>ul>li:hover>ul{
display: block;
position: absolute;
left: 120px;
top: 0px;
min-width: 150px;
}
#nav>li>ul>li:hover>ul>li{
}
#nav a:hover{
background-color: #f40;
color: #fff;
}
#nav>li>ul{
display: none;
}
#nav>li>ul>li>ul{
display: none;
}
div{
/*display: block;*/
margin-left: 400px;
}
div::after{
content: '';
display: block;
clear: both;
}
HTML+CSS实现简单三级菜单的更多相关文章
- Python_简单三级菜单制作
一:制作要求 1.三级菜单 2.可依次选择进入各子菜单 3.所需新知识点:字典,列表 *本文通过三种方法完成,第一种:只使用循环,第二种:使用列表,第三种:使用字典 二:FlowChart流程图 与上 ...
- CSS之简单树形菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 纯css实现的三级水平导航菜单
vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 <html> <head> <meta charset="UTF-8" ...
- CSS实现三级菜单[转]
头部导航条布局 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- 纯css制作三级菜单
<!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...
- Python学习-------------------三级菜单简单版
题目: 多级菜单 1.三级菜单 2.可依次选择进入的各子菜单 3.所需新知识点:列表.字典 ReadMe: 这个做循环,比较绕脑子 点开运行即可 Min ...
- Python3学习之路~2.5 简单的三级菜单程序
程序:三级菜单 需求: 1.打印省.市.县三级菜单2.可返回上一级3.可随时退出程序 代码1: data={ "山东":{ "济南":["历下区&qu ...
- python（5）- 简单练习：python三级菜单优化
python三级菜单优化,菜鸟版链接:http://www.cnblogs.com/xuyaping/p/6648170.html menu = { '北京':{ '海淀':{ '五道口':{ 'so ...
随机推荐
- Django——Django,uwsgi Nginx组合建站
近来抽时间看了点关于python的资料,试着架设了下运行环境,于是写了本文记录之. 用到的软件: Django-1.6.1 uwsgi-2.0.7 python-3.3.3 nginx-1.7.7 安 ...
- SqlServer--百度百科
SQL是英文Structured Query Language的缩写,意思为结构化查询语言.SQL语言的主要功能就是同各种数据库建立联系,进行沟通.按照ANSI(美国国家标准协会)的规定,SQL被作为 ...
- HDU 4925 Apple Tree（推理)
HDU 4925 Apple Tree 题目链接 题意:给一个m*n矩阵种树,每一个位置能够选择种树或者施肥,假设种上去的位置就不能施肥,假设施肥则能让周围果树产量乘2.问最大收益 思路:推理得到肯定 ...
- 使用SAS令牌连接Azure EventHub
概述 事件中心使用在命名空间和事件中心级别提供的共享访问签名.SAS令牌是从SAS密钥生成的,它是以特定格式编码的URL的SHA哈希. 事件中心可以使用密钥(策略)的名称和令牌重新生成哈希,以便对发送 ...
- 符合BME风格的弹窗\菜单\表格\文件上传控件
1.弹窗 2.菜单 3.表格 4.文件上传控件 笔记补充......
- 学习使用master.dbo.spt_values表
如果要生成的临时表中有个连续的数字列,或者连续的日期列,如下所示: 2012-1-1 2012-1-2 2012-1-3 ... ... 可以这样写: declare @begin datetime, ...
- es number_of_shards和number_of_replicas
number_of_replicas 是数据备份数,如果只有一台机器,设置为0 number_of_shards 是数据分片数,默认为5,有时候设置为3 可以在线改所有配置的参数,number_of ...
- FPGA和DSP间基于SRIO的高速通信系统设计
作者:陈婷,岳强,汪洋 解放军信息工程大学 摘要: 现代信号处理系统通常需要在不同处理器之间实现高速数据通信,SRIO协议由于高效率.低延时的特性被广泛使用.本文研究了在FPGA和DSP两种处理器之间 ...
- 李洪强-CALayer4-自定义层
自定义层,其实就是在层上绘图,一共有2种方法,下面详细介绍一下. 一.自定义层的方法1 方法描述:创建一个CALayer的子类,然后覆盖drawInContext:方法,使用Quartz2D API进 ...
- PyTorch在64位Windows下的Conda包（转载）
PyTorch在64位Windows下的Conda包 昨天发了一篇PyTorch在64位Windows下的编译过程的文章,有朋友觉得能不能发个包,这样就不用折腾了.于是,这个包就诞生了.感谢@晴天14 ...