原文： HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element
许多网站、应用程序和网页使用下拉菜单来显示信息列表。你可以用它们来创建导航菜单、表格的选项，以及更多。
如果你看其中一些菜单或列表，你可能会想象到创建它们会有多复杂。是的——在某些情况下，它变得有点儿复杂。
下拉菜单是一个选项列表，当用户通过点击菜单或用光标悬停在菜单上与之互动时，该列表会垂直显示。
当用户通过再次点击或将光标从菜单上移开而停止与菜单的交互时，该菜单也会消失。
在这篇文章中，你将学习如何在你的网页上为 select 元素添加一个下拉列表。你还将学习各种可用的选项，以及如何创建一个可悬停的下拉列表/菜单。
如何创建一个 HTML 下拉列表
在 HTML 中，默认情况下，你总是可以用 select 标签和 option 标签一起创建一个下拉列表。这主要是在表单中用于从许多选项的列表中选择一个值。
选择标签有两个主要属性：name 和 id 属性。
// 语法
<select name="" id="">
<option value="">...</option>
// ...
</select>
当表单中的选择被提交时，你使用 name 属性来识别下拉。你可以通过把 id 属性和 label 的 for 属性值设置为一样的，来把它们连接起来 。
// 语法
<label for="languages">List of Languages:</label>
<select name="" id="languages">
<option value="">...</option>
// ...
</select>
select 标签也有一些可选的布尔属性，如 disabled（禁用选择字段）、required（使该字段在表单中为必须的），以及更多。
<select name="" id="languages" required>
// ...
</select>
// 或者
<select name="" id="languages" disabled>
// ...
</select>
在 select 标签中，你可以在单个 option 标签中添加许多选项。option 标签有一个 value 的属性，指定了一个选项被选中时从表单中提交的值。
<select name="language" id="language">
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="java">Java</option>
</select>
还有其他布尔属性，如 disabled（禁用菜单中的选项）和 selected（你用它来设置一个特定的选项作为页面加载时的默认选定选项，而不是第一个选项）。
<select name="language" id="language">
<option value="javascript" disabled>JavaScript</option>
<option value="python">Python</option>
<option value="c++">C++</option>
<option value="java" selected>Java</option>
</select>
在上面的代码中，第一个选项的属性是 disabled，意味着你将不能选择这个选项。第四个选项的属性是 selected，这意味着不是默认将 JavaScript 作为选择值，而是选择 Java。
如何创建一个可悬停的下拉菜单
当你滚动浏览或访问许多先进的和现代的网页时，你会注意到它们有下拉菜单。
这些菜单用于导航，帮助把类似的链接放在一起。大多数时候，当你把鼠标悬停在父菜单上时，就会出现下拉列表。
你可以通过各种方式创建这些类型的菜单，因为没有直接的语法来建立一个菜单。
你可以使用 CSS 样式来创建，当用户在菜单上悬停时显示和隐藏下拉列表。一个非常好的方法是创建一个容纳菜单和下拉列表的 div。
<div class="dropdown">
<button>Profile</button>
<div class="dropdown-options">
<a href="#">Dashboard</a>
<a href="#">Setting</a>
<a href="#">Logout</a>
</div>
</div>
这个 div 作为一个容器，你可以把它设置为 position 为 relative，和 display 为 inline-block，这样下拉选项就会出现在菜单下面。
.dropdown {
display: inline-block;
position: relative;
}
你可以按照自己的想法设计按钮和下拉选项。但控制悬停效果的主要样式，默认情况下，将 dropdown-options 设置为不显示。那么，当鼠标悬停在菜单上时，display 不会被设置为 block，所以选项是可见的。你还将 position 设置为 absolute，所以选项出现在菜单下面，并将 overflow 设置为 auto，以便在小屏幕上进行滚动。
.dropdown-options {
display: none;
position: absolute;
overflow: auto;
}
.dropdown:hover .dropdown-options {
display: block;
}
在下面的演示中，我们添加了更多的样式，使下拉菜单更有吸引力更美观。
总结
在这篇文章中，你已经学会了如何用 select 标签创建一个下拉列表。你还学习了如何用 CSS 处理悬停效果来创建可悬停的下拉菜单。
你可以在《HTML select 标签——如何制作下拉菜单或组合列表》文章中了解更多关于 select 标签的信息。