如何制作 HTML 下拉菜单

在 HTML 中，我们可以使用以下不同的方法轻松地在 Html 文档中制作下拉菜单

1. 使用 Html 表单
2. 使用内部 CSS

使用 Html 表单

如果我们要使用表单在 Html 文档中制作下拉菜单，我们必须遵循以下步骤。通过这些步骤，我们可以轻松制作下拉菜单

步骤 1： 首先，我们必须在任何文本编辑器中输入 Html 代码，或者打开已有的 Html 文件，在其中使用表单制作下拉菜单。

步骤 2： 现在，我们必须将光标放置在 Html 文档 body 标签中我们希望显示下拉菜单的位置。然后，我们必须在该位置键入 <form> 标签。

步骤 3： 现在，我们必须在起始和结束表单标签之间定义 <label> 标签 和 <select> 标签。

步骤 4： 现在，我们必须根据要在下拉菜单中显示的值的数量来定义 option 标签。

步骤 5： 最后，我们必须保存 Html 文件，然后运行该文件。

以上 Html 代码的输出显示在以下屏幕截图中

使用内部 CSS

如果我们要使用内部层叠样式表在 Html 文档中制作下拉菜单，我们必须遵循以下步骤。通过这些步骤，我们可以轻松制作下拉菜单

步骤 1： 首先，我们必须在任何文本编辑器中键入 Html 代码，或者打开已有的 Html 文件，在其中使用 内部 CSS 制作下拉菜单。

步骤 2： 现在，我们必须将光标放置在 Html 文档 head 标签中 title 标签的结束符之后，然后将样式定义在 <style> 标签内部，如下面代码块所示。

现在，我们必须创建下拉菜单本身。因此，首先我们必须定义一个具有不同属性的类 dropbtn，如下面代码块所示

步骤 3： 然后，我们必须使用另一个定义下拉菜单的类。

步骤 4： 现在，我们必须创建另一个类，用于描述下拉菜单的显示方式。此类别包含各种属性，如下面代码块所示。

步骤 5： 现在我们必须添加另一个类来定义下拉菜单中文本的颜色和大小。

步骤 6： 最后，在 style 标签中，我们必须编辑下拉菜单的悬停行为。因此，我们可以轻松地在 style 标签中使用以下代码进行编辑。

步骤 7： 现在，我们必须将光标放置在 body 标签中我们希望显示下拉菜单的位置。然后，我们必须将以下代码插入到 body 标签中。

步骤 8： 最后，我们必须保存 Html 文件，然后在浏览器中运行该文件。

上述 HTML 代码的输出显示在以下屏幕截图中