鼠标滑过下拉菜单CSS3

最新推荐文章于 2023-02-14 09:17:12 发布

nijiadalinge

最新推荐文章于 2023-02-14 09:17:12 发布

阅读量476

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79193640

版权

移动开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.hezi{
				position: relative;
				display: inline-block;
			}
			.xiala{
				background-color: #4CAF50;
				color:white;
				padding: 16px;
				font-size: 16px;
				border: none;
				cursor: pointer;
			}
			.xiala_hezi{
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			}
			.xiala_hezi a{
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
			}
			
			.xiala_hezi a:hover{
				background-color: #f1f1f1;
			}
			.hezi:hover .xiala_hezi{
				display: block;
			}
			.hezi:hover .xiala{
				background-color: #3e8e41;
			}
		</style>
	</head>
	<body>
		<div class="hezi">
			<button class="xiala">下拉菜单</button>
			<div class="xiala_hezi">
				 <a href="http://www.runoob.com">菜鸟教程 1</a>
				 <a href="http://www.runoob.com">菜鸟教程 2</a>
				 <a href="http://www.runoob.com">菜鸟教程 3</a>
			</div>
		</div>
	</body>
</html>