当前位置：极客教程 > CSS > CSS 精品教程 > CSS 下拉菜单

CSS 下拉菜单

CSS 下拉菜单

什么是下拉菜单

下拉菜单是一种用户界面元素，包含一个选项列表。它允许用户通过悬停或点击触发元素来选择列表中的一个值。下拉菜单通常用于导航菜单、表单和网站的其他交互组件。

下拉菜单使用HTML的无序列表(<ul>)和列表项(<li>)元素来创建。

本章将介绍使用CSS样式化和排列下拉菜单元素的用法，控制它们的外观和行为。

使用CSS创建下拉菜单

让我们看一个简单的CSS下拉菜单的示例，其中包含一系列选项。尝试点击 编辑和运行 按钮，以查看代码的结果。当你将鼠标悬停在”选择一个选项”文本上时，会出现一个下拉菜单，其中包含不同的选项。

示例

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block;
   }
   .dropdown-button {
      background-color: #40a944; padding: 10px 20px; border: none;
      cursor: pointer; color: #ffffff; margin: 0; width:155px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; margin: 0; min-width: 160px;
      padding: 12px 16px; z-index: 1;
   }
   .dropdown-button, .dropdown:hover .dropdown-menu {
      display: block;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <span class="dropdown-button">Select an Option</span>
      <div class="dropdown-menu">
         <p>Option 1</p>
         <p>Option 2</p>
         <p>Option 3</p>
      </div>
   </div>
</body>
</html>

在上面的例子中：

  • 使用任何HTML元素，如<span>或<button>打开下拉内容。

  • 要创建下拉内容或菜单，使用容器元素（如<div>）。

  • 使用CSS正确包裹和定位下拉内容。

  • .dropdown类使用position:relative。此属性将下拉菜单放置在下拉按钮的正下方（使用position:absolute）。

  • .dropdown-menu类持有实际的下拉内容。默认情况下，它是隐藏的，并在悬停时显示。

  • :hover选择器在用户将鼠标移动到下拉按钮上时显示下拉菜单。

  • 您可以使用CSS样式单独装饰您的列表选项。

CSS可悬停下拉菜单

可悬停下拉菜单是一种用户界面元素，当用户将光标悬停在触发元素上时，下拉菜单出现。当用户将鼠标移开触发元素时，下拉菜单通常会消失。

示例

让我们看一个例子。此例使用下拉框内的锚标签，并将其样式设置为适合样式化的下拉按钮：

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block;
   }
   .dropdown-button {
      background-color: #40a944; padding: 15px; border: none;
      cursor: pointer; color: #ffffff; margin: 0; width: 162px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; padding: 0; margin: 0;
      min-width: 160px; list-style-type: none;
   }
   .dropdown-menu li {
      padding: 10px; background-color: #15AD39;

   }
   .dropdown-menu li a {
      display: block; text-decoration: none; color: #ffffff;
   }
   .dropdown:hover .dropdown-menu {
      display: block;
   }
   .dropdown-menu li:hover {
      background-color: #82ea32;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-button">Select an Option</button>
      <ul class="dropdown-menu">
         <li><a href="#">Option 1</a></li>
         <li><a href="#">Option 2</a></li>
         <li><a href="#">Option 3</a></li>
      </ul>
   </div>
</body>
</html>

CSS可点击下拉菜单

当你点击下拉菜单时，它会展开显示可用选项，你可以通过点击其中一个选项来进行选择。

示例

让我们看个例子：

<html>
<head>
<style>
   .dropdown-button {
      background-color: #40a944; padding: 15px; border: none; cursor: pointer;
      color: #ffffff; margin: 0; width: 162px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; margin: 0; padding: 0; min-width: 160px;
      list-style-type: none;
   }
   .dropdown-menu li {
      padding: 10px; background-color: #15AD39;
   }
   .dropdown-menu li a {
      display: block; text-decoration: none; color: #ffffff;
   }
   .dropdown-menu li:hover {
      background-color: #82ea32;
   }
   .show {
      display: block;
   }
</style>
<script>
   document.addEventListener('DOMContentLoaded', function () {
      const button = document.querySelector('.dropdown-button');
      const dropdownContent = document.querySelector('.dropdown-menu');

      button.addEventListener('click', function () {
         dropdownContent.classList.toggle('show');
      });
      document.addEventListener('click', function (event) {
         if (!event.target.matches('.dropdown-button') && dropdownContent.classList.contains('show')) {
            dropdownContent.classList.remove('show');
         }
      });
   });
</script>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-button">Select an Option</button>
      <ul class="dropdown-menu">
         <li><a href="#">Option 1</a></li>
         <li><a href="#">Option 2</a></li>
         <li><a href="#">Option 3</a></li>
      </ul>
   </div>
</body>
</html>

CSS下拉菜单 – 右对齐

您可以通过将 float: right 样式应用于包含下拉菜单的 <div> 来将下拉菜单放置在屏幕的右侧。这种排列方式将菜单移到屏幕的右侧。

示例

让我们看一个示例：

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block; float: right;
   }
   .dropdown-button {
      background-color: #40a944; padding: 15px; border: none;
      cursor: pointer; color: #ffffff; margin: 0; width: 162px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; padding: 0; margin: 0;
      min-width: 160px; list-style-type: none;
   }
   .dropdown-menu li {
      padding: 10px; background-color: #15AD39;

   }
   .dropdown-menu li a {
      display: block; text-decoration: none; color: #ffffff;
   }
   .dropdown:hover .dropdown-menu {
      display: block;
   }
   .dropdown-menu li:hover {
      background-color: #82ea32;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-button">Select an Option</button>
      <ul class="dropdown-menu">
         <li><a href="#">Option 1</a></li>
         <li><a href="#">Option 2</a></li>
         <li><a href="#">Option 3</a></li>
      </ul>
   </div>
</body>
</html>

CSS下拉菜单-左对齐

您可以通过将 float: left 样式添加到包含下拉菜单的 <div> 来实现左对齐的下拉菜单。这种布局将菜单移动到屏幕的最左边。

示例

让我们来看一个例子：

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block; float: left;
   }
   .dropdown-button {
      background-color: #40a944; padding: 15px; border: none;
      cursor: pointer; color: #ffffff; margin: 0; width: 162px;
   }
   .dropdown-menu {
      display: none; position: absolute; background-color: #fff;
      border: 1px solid #ccc; padding: 0; margin: 0; min-width: 160px;
      list-style-type: none;
   }
   .dropdown-menu li {
      padding: 10px; background-color: #15AD39;

   }
   .dropdown-menu li a {
      display: block; text-decoration: none; color: #ffffff;
   }
   .dropdown:hover .dropdown-menu {
      display: block;
   }
   .dropdown-menu li:hover {
      background-color: #82ea32;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <button class="dropdown-button">Select an Option</button>
      <ul class="dropdown-menu">
         <li><a href="#">Option 1</a></li>
         <li><a href="#">Option 2</a></li>
         <li><a href="#">Option 3</a></li>
      </ul>
   </div>
</body>
</html>

CSS带图像的下拉菜单

您可以通过在文本选项中包含图像来增强下拉菜单。当您将鼠标悬停在小图像或菜单按钮上时，会出现一个更大尺寸的图像以及描述。

示例

让我们看一个示例：

<html>
<head>
<style>
   .dropdown {
      position: relative; display: inline-block;
   }
   .dropdown-img-menu {
      display: none; position: absolute;background-color: #fff;border: 1px solid #ccc;
   }
   .dropdown:hover .dropdown-img-menu {
      display: block;
   }
   .img-descripition {
      padding: 15px; background-color: rgb(38, 222, 53);text-align: center;
   }
</style>
</head>
<body>
   <div class="dropdown">
      <img src="images/red-flower.jpg" alt="Red Flower" width="100" height="50">
      <div class="dropdown-img-menu">
         <div class="img-descripition">Beautiful Red Flower</div>
         <img src="images/red-flower.jpg" alt="Red Flower" width="200" height="150">
      </div>
   </div>
</body>
</html>

CSS下拉菜单-导航栏

下拉导航栏通常在网站导航菜单中被发现。它由一个水平条组成，包含一个链接列表。当用户悬停或点击特定链接时，会出现下拉菜单，显示与所选链接相关的其他导航选项或内容。

现在我们将运用我们的下拉菜单知识来创建一个使用CSS的漂亮的导航栏。

示例

让我们看一个示例：

<html>
<head>
<style>
   ul {
      list-style-type: none; margin: 0; padding: 0; overflow: hidden;
      background-color: #40a944;
   }
   li {
      float: left;
   }
   li a, .dropdown-option {
      display: inline-block; color: white; text-align: center; padding: 14px 16px;
      text-decoration: none; z-index: 99;
   }
   li a:hover,.dropdown:hover .dropdown-option {
      background-color: #82ea32;
   }

   li.dropdown {
      display: inline-block;
   }
   .dropdown-menu {
      display: none; position: absolute; min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      min-width: 160px; background-color: #f9f9f9; z-index: 1;
   }
   .dropdown-menu a {
      color: black; text-decoration: none; display: block; text-align: left;
   }
   .dropdown-menu a:hover {
      background-color: #82ea32;
   }
   .dropdown:hover .dropdown-menu {
      display: block;
   }
</style>
</head>
<body>
   <ul>
      <li><a href="#">Tutorialspoints</a></li>
      <li><a href="#">Home</a></li>
      <li class="dropdown">
         <a href="#" class="dropdown-option">Articles</a>
         <div class="dropdown-menu">
         <a href="#">HTML</a>
         <a href="#">CSS</a>
         <a href="#">Bootstrap</a>
         </div>
      </li>
   </ul>
   <h2>Dropdown Menu inside a Navigation Bar</h2>
   <p>Hover over the "Articles" link to see the dropdown menu.</p>
</body>
</html>

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

CSS 精品教程