CSS+HTML实现下拉菜单效果

最新推荐文章于 2024-08-24 09:00:00 发布

MM_GS

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量4.1k

点赞数

文章标签： CSS HTML

本文链接：https://blog.csdn.net/MM_GS/article/details/82802675

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.drop_title{
				height: 40px;
				width: 80px;
				background: lightblue;
				border: 1px solid lightgray;
				text-align: center;
				line-height: 40px;
			}
			.drop_con a{
				display: block;
				text-decoration: none;
				color: black;
				text-align: center;
				height: 40px;
				width: 80px;
				background: lightblue;
				border: 1px solid lightgray;
				line-height: 40px;
			}
			.drop_con{
				display: none;
			}
			.drop:hover .drop_con{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="drop">
			<div class="drop_title">菜单设置</div>
			<div class="drop_con">
				<a href="#">菜单一</a>
				<a href="#">菜单二</a>
				<a href="#">菜单三</a>
				<a href="#">菜单四</a>
			</div>
		</div>
	</body>
</html>