<!doctype html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>仿京东左侧菜单</title>
		<link href="css/style.css" rel="stylesheet" />
	</head>

	<body>
		<div class="nav-box">
			<div class="nav-top">
				<a href="">全部商品分类</a>
			</div>
			<ul>
				<li>
					<a href="">家用电器</a>
					<div><img src="img/erji.jpg" /></div>
				</li>
				<li>
					<a href="">手机</a>、
					<a href="">数码</a>、
					<a href="">京东通信</a>
					<div><img src="img/erji1.jpg" /></div>
				</li>
				<li>
					<a href="">电脑</a>、
					<a href="">办公</a>
					<div><img src="img/erji2.jpg" /></div>
				</li>
				<li>
					<a href="">家居</a>、
					<a href="">家具</a>、
					<a href="">家装</a>、
					<a href="">厨具</a>
					<div><img src="img/erji3.jpg" /></div>
				</li>
				<li>
					<a href="">男装</a>、
					<a href="">女装</a>、
					<a href="">珠宝</a>
					<div><img src="img/erji4.jpg" /></div>
				</li>
			</ul>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script src="js/menu.js"></script>
	</body>

</html>
$(function() {
	$('li').mouseover(function(){
		$(this).css('background-color','orange');
		$(this).children('div').show();
	}).mouseout(function(){
		$(this).css('background-color','#B1191A');
		$(this).children('div').hide();
	})
})


* {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

.nav-box {
	width: 210px;
	margin: 5px 0 0 5px;
}

.nav-top a {
	display: block;
	height: 45px;
	font-size: 16px;
	line-height: 45px;
	padding: 0 10px;
	background: #B1191A;
	color: #fff;
}

ul {
	background: #c81623;
	list-style: none;
	padding-bottom: 1px;
}

ul li {
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	color: #fff;
	position: relative;
	padding-left: 5px;
}

.orange {
	background-color: orange;
}

ul li a {
	color: #fff;
}

ul li div {
	display: none;
	position: absolute;
	left: 211px;
	top: 0px;
}

ps:图片自选

# jquery # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云致力推进全域Serverless时代，引领技术创新，赋能行业实践

avatar 华为云开发者联盟
cover

基于Serverless服务构建千万车辆数据实时处理的车联网业务

avatar 华为云开发者联盟
cover

大模型时代下的AI开发

avatar 华为云开发者联盟