HTML下拉菜单

原文： HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element

许多网站、应用程序和网页使用下拉菜单来显示信息列表。你可以用它们来创建导航菜单、表格的选项，以及更多。

如果你看其中一些菜单或列表，你可能会想象到创建它们会有多复杂。是的——在某些情况下，它变得有点儿复杂。

下拉菜单是一个选项列表，当用户通过点击菜单或用光标悬停在菜单上与之互动时，该列表会垂直显示。

当用户通过再次点击或将光标从菜单上移开而停止与菜单的交互时，该菜单也会消失。

在这篇文章中，你将学习如何在你的网页上为 select 元素添加一个下拉列表。你还将学习各种可用的选项，以及如何创建一个可悬停的下拉列表/菜单。

在 HTML 中，默认情况下，你总是可以用 select 标签和 option 标签一起创建一个下拉列表。这主要是在表单中用于从许多选项的列表中选择一个值。

选择标签有两个主要属性：name 和 id 属性。

当表单中的选择被提交时，你使用 name 属性来识别下拉。你可以通过把 id 属性和 label 的 for 属性值设置为一样的，来把它们连接起来 。

select 标签也有一些可选的布尔属性，如 disabled（禁用选择字段）、required（使该字段在表单中为必须的），以及更多。

在 select 标签中，你可以在单个 option 标签中添加许多选项。option 标签有一个 value 的属性，指定了一个选项被选中时从表单中提交的值。

还有其他布尔属性，如 disabled（禁用菜单中的选项）和 selected（你用它来设置一个特定的选项作为页面加载时的默认选定选项，而不是第一个选项）。

在上面的代码中，第一个选项的属性是 disabled，意味着你将不能选择这个选项。第四个选项的属性是 selected，这意味着不是默认将 JavaScript 作为选择值，而是选择 Java。

当你滚动浏览或访问许多先进的和现代的网页时，你会注意到它们有下拉菜单。

这些菜单用于导航，帮助把类似的链接放在一起。大多数时候，当你把鼠标悬停在父菜单上时，就会出现下拉列表。

你可以通过各种方式创建这些类型的菜单，因为没有直接的语法来建立一个菜单。

你可以使用 CSS 样式来创建，当用户在菜单上悬停时显示和隐藏下拉列表。一个非常好的方法是创建一个容纳菜单和下拉列表的 div。

这个 div 作为一个容器，你可以把它设置为 position 为 relative，和 display 为 inline-block，这样下拉选项就会出现在菜单下面。

你可以按照自己的想法设计按钮和下拉选项。但控制悬停效果的主要样式，默认情况下，将 dropdown-options 设置为不显示。那么，当鼠标悬停在菜单上时，display 不会被设置为 block，所以选项是可见的。你还将 position 设置为 absolute，所以选项出现在菜单下面，并将 overflow 设置为 auto，以便在小屏幕上进行滚动。

在下面的演示中，我们添加了更多的样式，使下拉菜单更有吸引力更美观。

在这篇文章中，你已经学会了如何用 select 标签创建一个下拉列表。你还学习了如何用 CSS 处理悬停效果来创建可悬停的下拉菜单。

你可以在《HTML select 标签——如何制作下拉菜单或组合列表》文章中了解更多关于 select 标签的信息。