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