步骤

1. 1打开HTML文本编辑器。您可以使用简单的文本编辑器，如记事本或文本编辑，也可以使用更高级的文本编辑器，如Notepad++。如果您决定使用Notepad++，请确保在继续之前从窗口顶部语言菜单的“H”部分选择HTML。

2. 2输入文档标题。这是确定文档其余部分使用的代码类型的代码：&lt；！DOCTYPE html&gt&书信电报；html&gt&书信电报；头&gt&书信电报；风格&gt；

3. 3自行创建下拉菜单。输入以下代码以确定下拉菜单的大小和颜色，确保将“#”替换为要使用的数字（数字越大，下拉菜单越大）。您还可以使用您选择的任何颜色（或HTML颜色代码）替换“背景色”和“颜色”值：。dropbtn{背景色：黑色；颜色：白色；填充：#px；字体大小：#px；边框：无；}

4. 4表示要在下拉菜单中放置链接。由于稍后将向下拉菜单添加链接，因此可以通过输入以下代码将它们放置在下拉菜单中：。下拉列表{position:relative；display:inline block；}

5. 5创建下拉菜单的外观。以下代码将确定下拉菜单的大小、涉及其他网页元素时的位置以及颜色。请务必用您的首选号码（例如250）替换“最小宽度”部分的“#”，并将“背景色”标题更改为您的首选颜色或HTML代码：。下拉内容{显示：无；位置：绝对；背景颜色：浅灰色；最小宽度：#px；z索引：1；}

6. 6在下拉菜单的内容中添加详细信息。下面的代码处理下拉菜单的文本颜色和下拉菜单按钮的大小。请确保将“#”替换为指定按钮大小的首选像素数：。下拉内容a{颜色：黑色；填充：#px#px；文本装饰：无；显示：块；}

7. 7编辑下拉菜单的悬停行为。当您将鼠标悬停在下拉菜单的按钮上时，需要更改一些颜色。第一行“背景色”指的是在下拉菜单中选择一个项目时出现的颜色变化，而第二行“背景色”指的是下拉菜单按钮的颜色变化。理想情况下，这两种颜色在未选中时都会比它们的外观更亮。下拉内容a：悬停{背景色：白色；}。下拉：悬停。下拉内容{display:block；}。下拉：悬停。dropbtn{背景色：灰色；}

8. 8关闭CSS部分。输入以下代码以表明您已完成文档的CSS部分：&lt/风格&gt&lt/头&gt；

9. 9创建下拉按钮的名称。输入以下代码，确保将“名称”替换为您希望下拉按钮的名称（例如菜单）：&lt；div class=“dropdown”&gt&书信电报；按钮class=“dropbtn”&gt；名称&lt/按钮&gt&书信电报；div class=“下拉内容”&gt；

10. 10添加下拉菜单的链接。下拉菜单中的每个项目都应该链接到某个内容，可以是网站上的某个页面，也可以是外部网站。您可以通过输入以下代码将项目添加到下拉菜单中，确保替换https://www.website.com与链接的地址（保留引号）和“名称”与链接的名称&书信电报；a href=”https://www.website.com“&gt；Name&lt；/a&gt；&lt；a href=”https://www.website.com“&gt；Name&lt；/a&gt；&lt；a href=”https://www.website.com“&gt；名称&lt；/a&gt；

11. 11收尾你的文件。输入以下标签以关闭文档并指示下拉菜单代码的结尾：&lt/部门&gt&lt/部门&gt&lt/车身&gt&lt/html&gt；

12. 12查看下拉框的代码。您的代码应该类似于以下内容：&lt；！DOCTYPE html&gt&书信电报；html&gt&书信电报；头&gt&书信电报；风格&gt；。dropbtn{背景色：黑色；颜色：白色；填充：16px；字体大小：16px；边框：无；}。下拉列表{position:relative；display:inline block；}。下拉内容{显示：无；位置：绝对；背景颜色：浅灰色；最小宽度：200px；z索引：1；}。下拉内容a{颜色：黑色；填充：12px 16px；文本装饰：无；显示：块；}。下拉内容a：悬停{背景色：白色；}。下拉：悬停。下拉内容{display:block；}。下拉：悬停。dropbtn{背景色：灰色；}&lt/风格&gt&lt/头&gt&书信电报；div class=“dropdown”&gt&书信电报；按钮class=“dropbtn”&gt；社交媒体&lt/按钮&gt&书信电报；div class=“下拉内容”&gt&书信电报；a href=”https://www.google.com“&gt；谷歌&lt；/a&gt；&lt；a href=”https://www.facebook.com“&gt；Facebook&lt；/a&gt；&lt；a href=”https://www.youtube.com“&gt；YouTube&lt；/a&gt；&lt；/div&gt；&lt；/div&gt；&lt；/body&gt；&lt；/html&gt；

• 在将代码发布到网站之前，一定要测试代码。
• 以上说明适用于将鼠标光标悬停在下拉菜单按钮上时将激活的下拉菜单。如果你想创建一个只在点击时出现的下拉菜单，你需要使用JavaScript。