实例代码
<!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>
运行效果：
评论