css+div纵向导航菜单及二级弹出菜单

最新推荐文章于 2022-05-17 11:14:38 发布

vvcbvv

最新推荐文章于 2022-05-17 11:14:38 发布

阅读量2.6k

点赞数 7

文章标签： html5 css 定位

本文链接：https://blog.youkuaiyun.com/vvcbvv/article/details/115468580

版权

本文介绍了如何使用CSS和HTML实现鼠标放置在一級菜单上时，二级菜单自动弹出的效果。关键步骤包括设置一级菜单的相对定位和二级菜单的绝对定位，以及利用:hover伪类控制二级菜单的显示隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能介绍，当鼠标放在一级菜单那里时，弹出二级菜单。结尾有效果图。
本功能重点1（二级菜单的位置）：
首先需要一级菜单的li里写position: relative;做一个相对定位二级菜单。

然后，在二级菜单里面写position: absolute;此时二级菜单的盒子的位置是与一级菜单重叠。所以，要做一个绝对定位，并设置其左边距为26px（一级菜单的宽度为26px）

本功能重点2（二级菜单显示）：
首先，默认情况将不显示二级菜单，display:none;
#menu ul li:hover ul{
display: block;
}
重点在于这一句，当鼠标放在li上的时间，二级菜单ul显示。是包裹在li当中的ul显示出来 ，当中ul li中的结构也有起到作用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>二级纵向菜单</title>
		<style type="text/css">
			a:hover{
				color: red;
			}
			a{
				color: black;
				text-decoration: none;
			}
			#menu{
				width: 100px;
				border: 1px solid grey;
				border-bottom: none;
			}
			#menu ul{
				list-style: none;
				margin: 0px;
				padding: 0px;
			}
			#menu ul li{
				border-bottom: 1px solid grey;
				background-color: #74B8FF;
				padding: 0px 8px;
				height: 26px;
				line-height: 26px;
				position: relative;
			}
			#menu ul li ul{
				position: absolute;
				display: none;
				width: 100px;
				left: 100px;
				top: 0px;
				
			}
			a:hover{
				color: red;
			}
			#menu ul li:hover ul{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">赛事指南</a>
					<ul>
						<li><a href="#">竞赛规程</a></li>
						<li><a href="#">报名须知</a></li>
						<li><a href="#">参赛声明</a></li>
						<li><a href="#">比赛路线</a></li>
					</ul>
				</li>
				<li><a href="#">赛事介绍</a>
					<ul>
						<li><a href="#">赛事111</a></li>
						<li><a href="#">特色222</a></li>
						<li><a href="#">精彩333</a></li>
					</ul>
					<ul>
						<li><a href="#">赛事简介</a></li>
						<li><a href="#">特色活动</a></li>
						<li><a href="#">精彩回顾</a></li>
					</ul>
					
				</li>
				<li><a href="#">赛事报名</a>
					<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>
				</li>
				<li><a href="#">合作伙伴</a>
					<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>
				</li>
			</ul>
		</div>
	</body>
</html>

效果图1 效果图2