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 ...
随机推荐
- leetcode268：Missing Number
描写叙述 Given an array containing n distinct numbers taken from 0, 1, 2, -, n, find the one that is mis ...
- 用箭头函数精简Vue 模块
https://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev 使用箭头函数,this指向v ...
- js bind 绑定this指向
1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...
- 华为AR路由器AR207-S配置pppoe拨号上网图解实例
- MYSQLMTOP!开源MYSQL监控系统
原文地址:http://www.lepus.cc/page/opensource
- 几段表单处理的JQuery代码（转）
1 只接受数字输入 $("#uAge").keydown(function(event) { // 允许退格和删除键 if ( event.keyCode == 46 || eve ...
- git设置及常用命令
下载 下载地址:https://git-scm.com/downloads windows系统安装 默认安装即可. 其它系统安装方式请自行百度,网上教程很多. 设置 windows桌面右键,选择Git ...
- 如何获取wifi名称(SSID)
@import SystemConfiguration.CaptiveNetwork; /** Returns first non-empty SSID network info dictionary ...
- Java并发编程（七）线程封闭
当访问共享的可变数据时,通常需要使用同步.一种避免使用同步的方式就是不共享数据. 如果仅在单线程内访问数据,就不需要同步.这种技术被称为线程封闭(Thread Confinement),它是实现线程安 ...
- MFC 点击按钮，弹出另一个对话框（模态及非模态对话框）
1. 模态对话框 资源视图->Dialog->右键->添加资源->新建->对话框->右键->添加类. 例如:在A_dialog中点击按钮弹出B_dialog ...