下拉菜单

常规下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

效果

下拉菜单
选项1
选项2
选项3

原理

利用 CSS 属性 display: none; 和 display: block; 在 :hover 状态下做一个 不显示/块显示 的切换。

代码

.html

						
<div class="dropdownmenu">
  <div class="dropdownbtn">下拉菜单</div>
  <div class="dropdowncontent">
    <div>选项1</div>
    <div>选项2</div>
    <div>选项3</div>
  </div>
</div>
						
					

.css

						
.dropdownmenu {
  position: relative;
  display: inline-block;
}
.dropdownbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  cursor: pointer;
}
.dropdowncontent {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdowncontent div {
  color: black;
  padding: 12px 16px;
}
.dropdowncontent div:hover {
  background-color: #f1f1f1;
}
.dropdownmenu:hover .dropdowncontent {
  display: block;
}
.dropdownmenu:hover .dropdownbtn {
  background-color: #3e8e41;
}