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 ...
随机推荐
- Spring使用经验之Listener综述
Note:Spring使用版本是4.1.6.RELEASE 1. ContextLoaderListener最基本的SpringListener,加载Spring配置文件 配置名为contextCon ...
- ORCAD常见DRC错误
一下就是网上整理的: https://blog.csdn.net/weixin_39671078/article/details/85344762 https://wenku.baidu.com/vi ...
- MyTest——边界检测
实现思路如下: Step1:大文件的内存映射,多线程数据读取,加快读取速度. Step2:点云数据预处理(抽希.去噪点). Step3:Step2处理后数据使用kdtree进行离散点排序. Step4 ...
- TensorFlow学习笔记 速记2 报错：failed call to cuDevicePrimaryCtxRetain: CUDA_ERROR_INVALID_DEVICE
版本: tensorflow-gpu 原因: 在创建session时没有使用我想让它用的gpu 解决方案: 1. 在python程序中: import os os.environ["CUDA ...
- Linux操作系统桌面环境GNOME和KDE的切换
一.设置GNOME或者KDE为默认的启动桌面环境 方法1:修改/etc/sysconfig/desktop,根据需要将“DESKTOP”后面的内容改为KDE或GNOME. 方法2:在当前用户目录下建立 ...
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
Atitit.监听键盘上下左右方向键事件java js jquery c#.net 1. Keyword1 2. 通用的实现流程1 3. Js的实现1 3.1. Bind control ,eve ...
- Atitit.code base view 视图的实现原理
Atitit.code base view 视图的实现原理 1. 视图的执行算法:1 2. 不可更新的视图:1 3. 关于视图的可插入性:insert2 4. 视图定义3 5. 调用3 1. 视图的执 ...
- 分分钟学会一门语言之Python篇
转自:http://www.code123.cc/1049.html Python 是 90 年代初由 Guido Van Rossum 创立的.它是当前最流行的程序语言之一.它那纯净的语法令我一见倾 ...
- git设置及常用命令
下载 下载地址:https://git-scm.com/downloads windows系统安装 默认安装即可. 其它系统安装方式请自行百度,网上教程很多. 设置 windows桌面右键,选择Git ...
- abp相关
在.core中增加类．并指定属性长度． nutget 中运行Add-Migration 名称 Update-Database -Verbose 迁移成功. 1.安装指定版本类库install-pack ...