jQuery实现二级导航菜单-CSDN博客

本文链接：https://blog.csdn.net/m0_53676388/article/details/141058102

页面加载完毕只有一级菜单，当光标移入一级菜单时显示对应的二级菜单

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二级导航菜单</title>
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			.li1 {
				background-color: rgb(204,204,204);
				font-weight: bold;
				float: left;
				padding: 0;
				margin: 0;
				width: 100px;
				text-align: center;
			}

			ul ul{
				display: none;
			}

			.out{
				display: block;
			}
			
		</style>
		<script>
			$(document).ready(function(){
				$("div:gt(1)").css({"border-left":"2px solid black"});
			 	$("ul li ul li").css({"border-bottom":"2px solid lightgray","background-color":"rgb(246,246,246)","font-weight":"normal"});
			 });
			$(function() {
				$("li:has(ul)").mouseover(function() {
					$(this).css("background-color", "yellow");
					$(this).children("ul").addClass("out");
				});
				$("li:has(ul)").mouseout(function() {
					$(this).css("background-color", "lightgray");
					$(this).children("ul").removeClass("out");
				});
			});
		</script>
	</head>
	<body>
		<div>
		<ul>
			<li class="li1">
				<div>首页</div>
				<ul>
					
				</ul>
			</li>
			<li class="li1">
				<div>关于企业</div>
				<ul>
					<li>企业简介</li>
					<li>企业项目</li>
				</ul>
			</li>
			<li class="li1">
				<div>科技产品</div>
				<ul>
					<li>全息技术</li>
					<li>建筑投影</li>
					<li>3D汽车</li>
					<li>其他应用</li>
				</ul>
			</li>
			<li class="li1">
				<div>传媒服务</div>
				<ul>
					<li>商业庆典</li>
					<li>演出策划</li>
					<li>婚礼定制</li>
				</ul>
			</li>
			<li class="li1">
				<div>联系我们</div>
				<ul>
					<li>电话</li>
					<li>邮箱</li>
					<li>地址</li>
				</ul>
			</li>
		</ul>
		</div>
	</body>
</html>