dropdown
下拉菜单中的选项可以是文本,图片的放大或者是链接,在这里使用的是链接,但是链接是打不开的,因为仅仅是测试
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css"/>
<meta charset="utf-8">
</head>
<body>
<h1>Dropdown Menu</h1>
<p><span>Note:</span>Move the mouse over the button please.</p>
<div class="dropdown">
<button class="dropbtn">dropdown
</button>
<div class="dropdown-content">
<a href="#link1">link1</a>
<a href="#link2">link2</a>
<a href="#link3">link3</a>
</div>
</div>
</body>
</html>
style.css
/*
* @Author: Lin
* @Date: 2017-07-15 17:22:54
* @Last Modified by: Lin
* @Last Modified time: 2017-07-15 17:48:31
*/
div.dropdown {
position:relative;
display:inline-block;
}
span {
font-weight:bold;
}
button.dropbtn {
background-color: #AA0000;
color:white;
cursor:pointer;
font-size:25px;
padding:8px;
}
div.dropdown-content {
display:none;
position:absolute;
background-color:#EEEEEE;
width:160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
display:block;
text-decoration:none;
color:black;
padding:12px 15px;
}
/*注意这里不是.dropbtn:hover,因为dropbtn是一个button,不能够用hover*/
.dropdown:hover .dropdown-content {
display:block;
}
.dropdown-content a:hover {
background-color:#DDDDDD;
}
.dropdown:hover .dropbtn {
background-color:#880000;
}
主要是通过display:none来display:block来进行控制。
显示的效果为: