使用HTML+CSS实现鼠标划过的二级菜单栏

最新推荐文章于 2023-03-13 15:59:48 发布

原创最新推荐文章于 2023-03-13 15:59:48 发布 · 2.2k 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用纯CSS实现的下拉菜单效果，通过:hover伪类触发子菜单显示，并利用绝对定位使其垂直居中。文章详细展示了如何设置菜单项的样式、浮动布局以及背景图片等细节。

<html>
	<head>
		<meta charset="utf-8">
		<style>
			body{
				text-align:center;
			}
			.menuDiv{
				border:1px solid #aac;
				overflow:hidden;
				display:inline-block;
			}
			.menuDiv a{
				text-decoration:none;
			}
			.menuDiv ul,.menuDiv li{
				list-style:none;
				margin:0px;
				padding:0px;
				float:left;
			}
			.menuDiv>ul>li>ul{
				position:absolute;
				display:none;
			}
			.menuDiv>ul>li>ul>li{
				float:none;
			}
			.menuDiv>ul>li:hover ul{
				display:block;
			}
			.menuDiv>ul>li>a{
				width:120px;
				display:block;
				line-height:40px;
				background-color:#AFE;
				color:black;
				text-align:center;
				border-left:1px solid #bbf;
			}
			.menuDiv>ul>li:first-child>a{
				border-left:none;
			}
			.menuDiv>ul>li>a:hover{
				color:#f0f;
				background-color:#bcf;
			}
			.menuDiv>ul>li>ul>li>a{
				width:120px;
				display:block;
				line-height:36px;
				background-color:#EFF;
				color:#456;
				text-align:center;
				border:1px solid #ccc;
				border-top:none;
			}
			.menuDiv>ul>li>ul>li:first-child>a{
				border-top:1px solid #ccc;
			}
			.menuDiv>ul>li>ul>li>a:hover{
				color:#a4f;
				background-color:#cdf;
			}
			.menuDiv>ul>li>ul>li>a{
				background-image:url('./list.gif');
				background-repeat:no-repeat;
				background-position-x:23px;
				background-position-y:13px;
			}
		</style>
	</head>


	<body>
		<div class="menuDiv">
			<ul>
				<li>
					<a href="#">菜单一</a>
					<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>
					</ul>
				</li>
				<li>
					<a href="#">菜单三</a>
					<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>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>