关于多级导航如何实现详细解释。

大家平时见过的导航一般都只有二级，二级里面有横列排着的，还有竖着排列的。

以下献上代码供大家分享，如果有更多种方法欢迎大家联系版主，版主用qq比较多1985076744.

为了让更加明白这个逻辑，所以加了class类名。缺点是加了class以后就不能复制粘贴了，去掉class

以后就可以复制粘贴了。

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<style>
	*{margin: 0;padding:0;}
	ul{list-style: none;}
	.ul2{margin: 50px;}
	.ul1{width: 1000px;}
	.ul1 li,.ul2 li{float: left;width: 80px;height: 40px;background: blue;cursor: pointer;text-align: center;line-height: 40px;}
	a{text-decoration: none;width: 80px;height: 40px;display: block;}
	a:hover{ background: red; }
	.ul1{display: none;}
	.ul2 li:hover .ul1{display: block; }.ul1:hover li{background: orange;}
	第一种样式
	.ul3{display: none;}
	.btn:hover .ul3{display: block;}
	.ul4{list-style: none;float: left;}
	.ul4 li{ height: 40px;background: green;float: left;width: 80px;text-align:center;line-height: 40px;}
	第二种样式

	*{margin: 0;padding: 0;} ul{list-style: none;}
	a{text-decoration: none;} li{width: 80px; height: 60px;background: blue;text-align: center;line-height: 60px;}
	.ul5 .li1{float: left;} .ul6 {float: left;}
	.ul6,.ul7{display:none; } .ul6{width: 1000px;}
	.ul5 .li1:hover .ul6{display: block;}
	.ul6 li:hover .ul7{display: block;}
	.ul7 li{float: left;}
	.ul6{position: relative;} .ul7{position:absolute;top: 0px; left: 80px; }
	三级导航样式
	</style>
	<body>

	<!-- <video src=""></video>
	<marquee behavior="alternate" direction="right" scrollamoun="50">我是文字</marquee> -->
	<ul class="ul2">
	<li><a href="">首页</a>
	<ul class="ul1">
	<li><a href="">首页</a></li>
	<li><a href="">首页</a></li>
	<li><a href="">首页</a></li>
	</ul>
	</li>
	</ul>


	<ul class="ul4">
	<li class="btn"><a href="">首页</a>
	<ul class="ul3">
	<li><a href="">首页</a></li>
	<li><a href="">首页</a></li>
	<li><a href="">首页</a></li>
	</li>
	</ul>
	</li>
	</ul>

	<ul class="ul5" style="margin:50px;">
	<li class="li1"><a href="">首页</a>
	<ul class="ul6">
	<li class="li3"><a href="">首页</a>
	<ul class="ul7">
	<li>首页</li>
	<li>首页</li>
	</ul>
	</li>
	<li><a href="">首页</a>
	<ul class="ul7">
	<li>首页</li>
	<li>首页</li>
	</ul>
	</li>
	</ul>
	</li>
	<li class="li1"><a href="">首页</a>
	<ul class="ul6">
	<li><a href="">首页</a>
	<ul class="ul7">
	<li>首页</li>
	<li>首页</li>
	</ul>
	</li>
	<li><a href="">首页</a>
	<ul class="ul7">
	<li>首页</li>
	<li>首页</li>
	</ul>
	</li>
	</ul>
	</li>
	</ul>
	</body>
	</html>

转载于:https://www.cnblogs.com/l8l8/p/8537948.html

关于多级导航如何实现详细解释。相关推荐

dedecms切换模板css,DEDECMS的模板的css的详细解释 -电脑资料
有的比较菜鸟的站长们,常常看到模板文件的CSS的代码密密麻麻的,就有点头晕!我在网上找到一位热心的站长给出了一份织梦模板的CSS详解,以下就是代码和代码的解释! /*---------- import ...
linux mkdir命令用法,linux中的mkdir命令的详细解释
linxu下的mkdir命令从字面上就可以理解其实是创建文件或者目录的意思.下面由学习啦小编为大家整理了linux的mkdir命令的详细解释的相关知识,希望对大家有帮助! 一.linux中的mkdir ...
linux中less命令详解,linux中的less命令的详细解释
linxu下的less命令可以查看文本文件.下面由学习啦小编为大家整理了linux的less命令的详细解释的相关知识,希望对大家有帮助! 一.linux中的less命令的详细解释 less命令语法 l ...
linux 脚本 ll命令,linux中ll命令的详细解释
linxu下的ll命令其实是ls-l的一个别名.下面由学习啦小编为大家整理了linux的ll命令的详细解释的相关知识,希望对大家有帮助! 一.linux中的ll命令的详细解释 ll并不是linux下一 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
Python精讲Numpy基础，大牛笔记详细解释
https://www.toutiao.com/a6664936105076326920/ 总认为Numpy是渣渣,直到深入接触以后才知道功能这么强大.堪比Matlab啊.果然是人生苦短,我用Pyth ...
UIApplication sharedApplication详细解释-IOS
UIApplication sharedApplication详细解释-IOS 分类: iOS开发2012-07-27 10:25 10287人阅读评论(2) 收藏举报 applicationui ...
MongoDB：详细解释mongodb的高级操作，聚合和游标
前几天总结了mongodb的安装入门.详细解释了增删改查的基本操作,今天再来总结下mongodb更高级的操作,聚合和游标. 一.聚合,mongodb的聚合操作一般分为四种情景,分别是:count.di ...
PySide2 基础入门-创建实例窗口（详细解释）
PySide2 基础入门-创建实例窗口(详细解释) python 3.7 / Pyside2 (如果使用pyQt5,将Pyside2 直接替换PyQt5即可)首先我们在Qt Designer中画好界面 ...

关于多级导航如何实现详细解释。

关于多级导航如何实现详细解释。相关推荐

最新文章

热门文章

关于多级导航如何实现 详细解释。

关于多级导航如何实现 详细解释。相关推荐

最新文章

热门文章

关于多级导航如何实现详细解释。

关于多级导航如何实现详细解释。相关推荐