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>

猜你喜欢

转载自blog.csdn.net/MM_GS/article/details/82802675