jq，css侧边栏下拉三级导航栏

最新推荐文章于 2023-08-12 13:07:06 发布

撑起自己半边天

最新推荐文章于 2023-08-12 13:07:06 发布

阅读量431

点赞数

分类专栏： jq html 文章标签： css js jquery html javascript

本文链接：https://blog.csdn.net/weixin_43840289/article/details/113933616

版权

jq 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

jq，css侧边栏下拉三级导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>navdemo</title>
		<style type="text/css">
			a{color: #000000;}
			.navdemo ul,.navdemo li{padding: 0;margin: 0;list-style: none;}
			.box{width: 1400px;margin: 0 auto;}
			.navdemo{width: 22%;background-color: #E4F2F0;float: left;}
			.navdemo ul li:hover{cursor: pointer;}
			.navdemo ul li:hover ul ul{display: none;}
			.navdemo ul ul{display: none;margin-left: 15px;}
			.navdemo ul ul a{color: #666;}
			.navdemo ul ul ul a{color: #999;}
			.navdemo ul ul ul{margin-left: 15px;}
			.navdemo ul>li{margin: 15px 0;}
		</style>
	</head>
	<body>
		<div class="box">
		<div class="navdemo">
			<ul id="one">
				<li>
					<a href="javascript:void(0)">一级导航长度测试长度测试长度测试长度测试长度测试长度测试长度测试</a>
				</li>
				<li>
					<a href="javascript:void(0)">一级导航</a>
					<ul id="two">
						<li><a href="javascript:void(0)">二级导航长度测试长度测试长度测试长度测试长度测试长度测试长度测试</a></li>
						<li>
							<a href="javascript:void(0)">二级导航</a>
							<ul id="free">
								<li><a href="javascript:void(0)">三级导航长度测试长度测试长度测试长度测试长度测试长度测试长度测试</a></li>
								<li><a href="javascript:void(0)">三级导航</a></li>
								<li><a href="javascript:void(0)">三级导航</a></li>
							</ul>
						</li>
						<li>
							<a href="javascript:void(0)">二级导航</a>
						</li>
						<li>
							<a href="javascript:void(0)">二级导航</a>
						</li>
						<li><a href="javascript:void(0)">二级导航</a></li>
						<li><a href="javascript:void(0)">二级导航</a></li>
					</ul>
				</li>
				<li>
					<a href="javascript:void(0)">一级导航</a>
					<ul id="two">
						<li><a href="javascript:void(0)">二级导航</a></li>
						<li><a href="javascript:void(0)">二级导航</a></li>
						<li><a href="javascript:void(0)">二级导航</a></li>
					</ul>
				</li>
				<li>
					<a href="javascript:void(0)">一级导航</a>
				</li>
				<li>
					<a href="javascript:void(0)">一级导航</a>
					<ul id="two">
						<li><a href="javascript:void(0)">二级导航</a></li>
						<li><a href="javascript:void(0)">二级导航</a></li>
					</ul>
				</li>
				<li>
					<a href="javascript:void(0)">一级导航</a>
				</li>
			</ul>
		</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(".navdemo ul>li").mouseover(function(){
					$(this).find("ul:first").css("display","block")
				})
				$(".navdemo ul li ul>li").mouseover(function(){
					$(this).find("ul").css("display","block")
				})
				
				$(".navdemo").mouseleave(function(){
					$(this).find("ul ul").css("display","none")
				})
			})
		</script>
	</body>
</html>

原型仅做记录，方便查阅！

撑起自己半边天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq，css侧边栏下拉三级导航栏

jq，css侧边栏下拉三级导航栏<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>navdemo</title> <style type="text/css"> a{color: #000000;} .navdemo ul,.navdemo li{padding: 0;margin: 0;list-style: none;}
复制链接

扫一扫