CSS 基础学习-202 CSS 下拉式菜单

由 hrs, 11 八月, 2023

实例代码

<!doctype html>
<html>
	<head>
		<meta charset ="utf-8">
		<title>下拉菜单</title>
		<style>
		.dropbth {
			background-color:red;
			color:white;
			padding:16px;
			font-size:136px;
			border:none;
			cursor:pointer;
		}
		.dropdown{
			position:relative;
			display:inline-block;
		}
		.dropdown-content{
			display:none;
			position:absolute;
			background-color:#f9f9f9f9;
			min-width:160px;
			box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
		  z-index:1;
		}
		.dropdown-content a {
				padding:12px 16px;
				color:black;
				text-decoration:none;
				display:block;
			}
			
		.dropdown-content a:hover{
			background-color:#f1f1f1f1;
		}
		.dropdown:hover .dropdown-content{
			display:block;
		}
		.dropdown:hover .dropbtn{
			background-color:#3e8e41;
		}
				
		</style>
	</head>
	<body>
		<h1>下拉菜单实例</h1>
		<p>请把鼠标移到按钮上，以打开下拉菜单。</p>
		
			<div class="dropdown"> 
				<button class="dropbtn">Dropdown</button>
			<div class="dropdown-content">
				<a href="https://www.dwoke.com">link 1</a>
				<a href="https://www.dwoke.com">link 2</a>
				<a href="https://www.dwoke.com">link 3</a>
			</div>
			</div>
		<p><b>Noet:</b>我们的测试链接用了href="#"。真实的网站会用URL。</p>
	</body>
</html>

运行效果：

标签

评论