jQuery下拉菜单

最新推荐文章于 2022-04-04 16:21:00 发布

雯靑爭

最新推荐文章于 2022-04-04 16:21:00 发布

阅读量318

点赞数 1

文章标签： jquery css3 前端

本文链接：https://blog.csdn.net/weixin_52421124/article/details/121109419

版权

下拉菜单

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script src="jquery.js"></script>
<style>
		 * {
		margin:0;
		padding:0;
		}
		li {
			list-style:none;
		}
		a{
			text-decoration:none;
			display:inline-block;
			text-align:center;
			line-height:35px;
			color:#fff;
			font-weight:bold;
		}
		div{
			margin:0 auto;
		}
		.m{
			width:800px;
			height:500px;
			background-color:#ffffff;
		}
		.n {
			width:600px;
			height:50px;
			background-color:#B8B2B2;
			margin:100px auto;
		}
		.n div {
			float:left;
			text-align:center;
			width:20%;
			height:100%;
		}
		.n .c h4 {
			width:100%;
			height:100%;
			line-height:50px;
			text-align:center;
			color:#fff;
		}
		.n .c ul {
			width:100%;
			height:400%;
			display:none;
		}
		.n .c:hover {
			background-color:#ffafff;
		}
		.n .c:first-child ul {
			background-color:#b877ff;
		}
		.n .c:nth-of-type(2) ul {
			background-color:#b877ff;
		}
		.n .c:nth-of-type(3) ul {
			background-color:#b877ff;
		}
		.n .c:nth-of-type(4) ul {
			background-color:#b877ff;
		}
		.n .c:nth-of-type(5) ul {
			background-color:#b877ff;
		}
		.n .c ul li {
			width:100%;
			height:20%;
			line-height:40px;
			color:#ffffff;
		}
		.n .c ul li:hover {
			background-color:#ffc9cc;
		}
	</style>
<script>
$(function() {
			var tab = $(".n .c");
			tab.mouseover(function(event) {
				$(this).find("ul").stop();
				$(this).find("ul").slideDown();
		
			}).mouseout(function(event) {
				$(this).find("ul").stop();
				$(this).find("ul").slideUp();
		
			});
		});
		$(function() {
			var tab = $(".n .c");
			tab.mouseover(function(event) {
				$(this).find("ul").stop(false,true);
				$(this).find("ul").slideDown();
		
			}).mouseout(function(event) {
				$(this).find("ul").stop(false,true);
				$(this).find("ul").slideUp();
		
			});
		});
</script>
<body bgcolor="#ffc9c6">
<center><br/><font color="#ffffff" size="9"><p>某某学校</p></font></center>
<div class="m">
		<div class="n">
				<div class="c">
					<h4><a href="#">软件学院</a></h4>
					<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>
					</ul>
				</div>
				<div class="c">
					<h4><a href="#">外国语学院</a></h4>
					<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>
					</ul>
				</div>
				<div class="c">
					<h4><a href="#">教育学院</a></h4>
					<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>
					</ul>
				</div>
				<div class="c">
					<h4><a href="#">艺术学院</a></h4>
					<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>
					</ul>
				</div>
				<div class="c">
					<h4><a href="#">数理学院</a></h4>
					<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>
					</ul>
				</div>
		</div>
</div>		
</body>
</html>

雯靑爭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery下拉菜单

下拉菜单<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><script src="jquery.js"></script><style> * { margin:0; padding:0; } li { list-style:none; }
复制链接

扫一扫