当鼠标移动到指定元素上时，会出现下拉菜单。
| <style> |
| .dropdown { |
| position: relative; |
| display: inline-block; |
| } |
| .dropdown-content { |
| display: none; |
| position: absolute; |
| background-color: #f9f9f9 ; |
| min-width: 160px; |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) ; |
| padding: 12px 16px; |
| z-index: 1; |
| } |
| .dropdown:hover .dropdown-content { |
| display: block; |
| } |
| </style> |
| <div class="dropdown"> |
| <span>Mouse over me</span> |
| <div class="dropdown-content"> |
| <p>Hello World!</p> |
| </div> |
| </div> |
HTML 部分：
我们可以使用任何的 HTM，元素来打开下拉菜单，如：<span>, 或 a <button> 元素。
使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
.dropdown类使用position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用position:absolute) 的右下角位置。
.dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意min-width的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽带一致，可设置width为 100% (overflow:auto设置可以在小尺寸屏幕上滚动)。
我们使用box-shadow属性让下拉菜单看起来像一个"卡片"。
:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
创建下拉菜单，并允许用户选取列表中的某一项：
这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：
| <style> |
| /* 下拉按钮样式 */ |
| .dropbtn { |
| background-color: #4CAF50 ; |
| color: white ; |
| padding: 16px; |
| font-size: 16px; |
| border: none; |
| cursor: pointer; |
| } |
| /* 容器 <div> - 需要定位下拉内容 */ |
| .dropdown { |
| position: relative; |
| display: inline-block; |
| } |
| /* 下拉内容 (默认隐藏) */ |
| .dropdown-content { |
| display: none; |
| position: absolute; |
| background-color: #f9f9f9 ; |
| min-width: 160px; |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) ; |
| } |
| /* 下拉菜单的链接 */ |
| .dropdown-content a { |
| color: black ; |
| padding: 12px 16px; |
| text-decoration: none; |
| display: block; |
| } |
| /* 鼠标移上去后修改下拉菜单链接颜色 */ |
| .dropdown-content a:hover {background-color: #f1f1f1 } |
| /* 在鼠标移上去后显示下拉菜单 */ |
| .dropdown:hover .dropdown-content { |
| display: block; |
| } |
| /* 当下拉内容显示后修改下拉按钮的背景颜色 */ |
| .dropdown:hover .dropbtn { |
| background-color: #3e8e41 ; |
| } |
| </style> |
| <div class="dropdown"> |
| <button class="dropbtn">下拉菜单</button> |
| <div class="dropdown-content"> |
| <a href="#">芝麻教程 1</a> |
| <a href="#">芝麻教程 2</a> |
| <a href="#">芝麻教程 3</a> |
| </div> |
| </div> |
