CSS 下拉菜单

下拉菜单，一般情况下都使用 HTML <select> 元素来创建，但是 <select> 默认的样式太简陋了

如果如果要创建一个下拉菜单，我们一般都是自己定制

本章节，我们就来学习如何定制一个下拉菜单效果

最终效果

我们先来看看最终效果，当鼠标移动到元素上时会显示下拉菜单

文本下拉菜单

简单教程

简单教程，简单编程

CSS 基础教程 Python 基础教程 Ruby 基础教程

简单教程，简单编程

下拉菜单 HTML 结构

使用 CSS 创建一个下拉菜单，需要创建下面的 HTML 结构

<div class="dropdown">
  <span class="dropspan">文本下拉菜单</span>
  <div class="dropdown-content">
    <p>简单教程</p>
    <p>简单教程，简单编程</p>
  </div>
</div>

class='dropdown' 先定义一个下拉菜单容器
<span class="dropspan"> 定义下拉菜单按钮
<div class="dropdown-content"> 定义下拉菜单要显示的内容

基本的原理就是：

默认情况下，设置隐藏 CSS display:none 隐藏 .dropdown-content
当鼠标移动到 .dropdown 上时，去掉 .dropdown-content 的隐藏 CSS

注意： 因为要显示的内容默认大小和 .dropdown 一样，所以可能需要特意为 dropdown-content 添加宽度 CSS

基本下拉菜单

了解了下拉菜单的 HTML 结构和原理，我们就可以为它们添加 CSS 属性了

.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;
}

运行范例 »

.dropdown 使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用position:absolute) 的右下角位置
.dropdown-content 类中是实际的下拉菜单

默认是隐藏的，在鼠标移动到指定元素后会显示

min-width 的值设置为 160px

注意: 如果想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)
使用 box-shadow 属性让下拉菜单看起来像一个"卡片"
:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单

下拉按钮

创建下拉按钮，并允许用户选取列表中的某一项

CSS 基础教程 Python 基础教程 Ruby 基础教程

可以在下拉的内容中添加 <a> 标签来创建下拉按钮

<style>
.dropbtn {    
    background-color: #4CAF50;
    color: white;    
    padding: 16px;
    font-size: 16px;    
    border: none;
    cursor: pointer;
}

.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 dropdown2">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content" style="min-width: 250px">
    <a href="void(0)">CSS 基础教程</a>
    <a href="void(0)">Python 基础教程</a>
    <a href="void(0)">Ruby  基础教程</a>
  </div>
</div>

运行范例 »

下拉内容对齐方式

左 ( float:left )

CSS 基础教程 Python 基础教程 Ruby 基础教程

右 ( float:right )

CSS 基础教程 Python 基础教程 Ruby 基础教程

如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右

则需要给 .dropdown-content 添加 CSS 样式 right: 0;

.dropdown-content {right: 0;}

运行范例 »

最终效果

下拉菜单 HTML 结构

基本下拉菜单

下拉按钮

下拉内容对齐方式

更多范例

CSS 基础教程