CSS - 下拉列表

上一页
下一页

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

下拉菜单是使用 HTML 的无序列表 （<ul>） 和列表项 （<li>） 元素创建的。

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

CSS 下拉列表 - 基本示例

让我们看一个简单的下拉列表示例，其中包含选项列表。当您将鼠标悬停在“选择选项”文本上时，会出现一个包含选项的下拉菜单。


<html>
<head>
<style>
	 	 .dropdown {
	 	 	 	 position: relative;
	 	 	 	 display: inline-block;
	 	 }
	 	 .dropdown-button {
	 	 	 	 background-color: #e81a1a;
	 	 	 	 padding: 10px 20px;
	 	 	 	 border: none;
	 	 	 	 cursor: pointer;
	 	 	 	 color: #ffffff;
	 	 	 	 margin: 0;
	 	 }
	 	 .dropdown-menu {
	 	 	 	 display: none;
	 	 	 	 position: absolute;
	 	 	 	 background-color: #fff;
	 	 	 	 border: 1px solid #ccc;
	 	 	 	 margin: 0;
	 	 	 	 min-width: 160px;
	 	 	 	 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	 	 	 	 padding: 12px 16px;
	 	 	 	 z-index: 1;
	 	 }
	 	 .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 类包含实际的下拉列表内容。默认情况下，它是隐藏的，并将在悬停时显示。
  • CSS box-shadow 属性，使下拉菜单看起来像一张卡片。
  • 当用户将鼠标移到下拉按钮上时，：hover 选择器会显示下拉菜单。

CSS 下拉列表 - 悬停效果

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

让我们看一个例子。此示例在下拉框内使用锚标记，并设置它们的样式以适应样式化的下拉按钮：


<html>
<head>
<style>
	 	 .dropdown {
	 	 	 	 position: relative;
	 	 	 	 display: inline-block;
	 	 }
	 	 .dropdown-button {
	 	 	 	 background-color: #e81a1a;
	 	 	 	 padding: 15px;
	 	 	 	 border: none;
	 	 	 	 cursor: pointer;
	 	 	 	 color: #ffffff;
	 	 	 	 margin: 0;
	 	 }
	 	 .dropdown-menu {
	 	 	 	 display: none;
	 	 	 	 position: absolute;
	 	 	 	 background-color: #fff;
	 	 	 	 border: 1px solid #ccc;
	 	 	 	 padding: 0;
	 	 	 	 margin: 0;
	 	 }
	 	 .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 Dropdown - 点击的下拉列表

当您单击下拉列表时，它会展开以显示可用选项，您可以通过单击它来选择其中一个选项。

让我们看一个例子：


<html>
<head>
<style>
	 	 .dropdown-button {
	 	 	 	 background-color: #e81a1a;
	 	 	 	 padding: 15px;
	 	 	 	 border: none;
	 	 	 	 cursor: pointer;
	 	 	 	 color: #ffffff;
	 	 	 	 margin: 0;
	 	 }
	 	 .dropdown-menu {
	 	 	 	 display: none;
	 	 	 	 position: absolute;
	 	 	 	 background-color: #fff;
	 	 	 	 border: 1px solid #ccc;
	 	 	 	 padding: 0;
	 	 	 	 margin: 0;

	 	 }
	 	 .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>
</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>
	 	 <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');
	 	 	 	 	 	 });

	 	 	 	 	 	 window.addEventListener('click', function (event) {
	 	 	 	 	 	 	 	 if (!event.target.matches('.dropdown-button') && dropdownContent.classList.contains('show')) {
	 	 	 	 	 	 	 	 	 	 dropdownContent.classList.remove('show');
	 	 	 	 	 	 	 	 }
	 	 	 	 	 	 });
	 	 	 	 });
	 	 </script>
</body>
</html>

CSS 下拉列表 - 右对齐菜单

您可以通过向包含下拉菜单的 <div>应用浮点数：右样式，在屏幕的右侧放置一个下拉菜单。这种安排将菜单移动到 屏幕。

让我们看一个例子：


<html>
<head>
<style>
	 	 .dropdown {
	 	 	 	 position: relative;
	 	 	 	 display: inline-block;
	 	 }
	 	 .dropdown-button {
	 	 	 	 background-color: #e81a1a;
	 	 	 	 padding: 15px;
	 	 	 	 border: none;
	 	 	 	 cursor: pointer;
	 	 	 	 color: #ffffff;
	 	 	 	 margin: 0;
	 	 }
	 	 .dropdown-menu {
	 	 	 	 display: none;
	 	 	 	 position: absolute;
	 	 	 	 background-color: #fff;
	 	 	 	 border: 1px solid #ccc;
	 	 	 	 padding: 0;
	 	 	 	 margin: 0;
	 	 	 	 list-style: 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" style="float: right;">
	 	 	 	 <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;
	 	 }
	 	 .dropdown-button {
	 	 	 	 background-color: #e81a1a;
	 	 	 	 padding: 15px;
	 	 	 	 border: none;
	 	 	 	 cursor: pointer;
	 	 	 	 color: #ffffff;
	 	 	 	 margin: 0;
	 	 }
	 	 .dropdown-menu {
	 	 	 	 display: none;
	 	 	 	 position: absolute;
	 	 	 	 background-color: #fff;
	 	 	 	 border: 1px solid #ccc;
	 	 	 	 padding: 0;
	 	 	 	 margin: 0;
	 	 	 	 list-style: 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" style="float: left;">
	 	 	 	 <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="Cinque Terre" width="200" height="100">
	 	 	 	 <div class="dropdown-img-menu">
	 	 	 	 	 	 <div class="img-descripition">Red color flower</div>
	 	 	 	 	 	 <img src="images/red-flower.jpg" alt="Cinque Terre" width="300" height="150">
	 	 	 	 </div>
	 	 </div>
</body>
</html>

CSS 下拉列表 - 带导航栏

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

让我们看一个例子：


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

	 	 li.dropdown {
	 	 	 	 display: inline-block;
	 	 }
	 	 .dropdown-menu {
	 	 	 	 display: none;
	 	 	 	 position: absolute;
	 	 	 	 background-color: #44e2d5;
	 	 	 	 border: 1px solid #ccc;
	 	 	 	 padding: 0;
	 	 	 	 margin: 0;
	 	 	 	 list-style: none;
	 	 	 	 width: 120px;
	 	 }
	 	 .dropdown-menu a {
	 	 	 	 color: black;
	 	 	 	 text-decoration: none;
	 	 	 	 display: block;
	 	 	 	 text-align: left;
	 	 }
	 	 .dropdown-menu a:hover {
	 	 	 	 background-color: #ee3131;
	 	 }
	 	 .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>
</body>
</html>
打印本页
上一页
下一页