作者:
Lewis Jackson
创建日期:
13 可能 2021
更新日期:
1 七月 2024
内容
此WikiHow教您如何使用HTML和CSS代码在网站上创建下拉菜单。当访问者将鼠标指针悬停在指定按钮上时，将出现一个下拉菜单。接下来，他们可以单击其中一项以转到该选项的网站。
脚步
打开HTML文本编辑器。 您可以使用简单的文本编辑器（记事本，TextEdit）或更高级的文本编辑器（记事本++）。
- 如果您决定使用记事本++，则需要选择 的HTML 从菜单的“ H”部分 语言 （语言）在窗口顶部，然后继续。
输入文档标题。 这是确定用于文档其余部分的代码类型的代码：
创建下拉菜单。 输入以下代码以指定下拉菜单的大小和颜色，请记住将“＃”替换为要使用的参数（数字越大，下拉菜单将越大）。我们还可以将背景色“ background-color”和颜色“ color”替换为所需的任何颜色（或HTML颜色代码）：
在下拉菜单中指定要替换的链接。 由于您随后将向菜单添加链接，因此可以通过输入以下代码在下拉菜单中替换它们：
创建下拉菜单的外观。 以下代码将定义下拉菜单的大小和颜色，包括与网页上其他元素组合时的位置。不要忘记用所需的数字（例如250）替换“最小宽度”部分中的“＃”，并将“ background-color”（背景颜色）标题更改为特定的颜色或HTML代码：
将详细信息添加到下拉菜单的内容。 以下代码将指定内部的文本颜色和下拉菜单按钮的大小。不要忘记将“＃”替换为定义菜单按钮大小的像素数：
编辑鼠标指针悬停在下拉菜单中时的变化方式。 将鼠标指针悬停在菜单按钮上时，需要更改一些颜色。当您在下拉菜单中选择某项时，“背景颜色”线将反映更改的颜色，而第二个“背景颜色”线是菜单按钮将更改为的颜色。理想情况下，这两种颜色都应比未选择时浅：
关闭CSS部分。 输入以下代码以指定您已完成文档的CSS部分：
为菜单按钮创建一个名称。 输入以下代码，但请记住将“名称”替换为下拉菜单按钮的名称（例如： 菜单):
将链接添加到菜单。 下拉菜单中的每个项目都将链接到某个内容，无论是当前网站上的页面还是外部网站。通过输入以下代码将您的选择添加到下拉菜单中，您需要替换其中的代码 https://www.website.com 用链接地址（保留括号），然后用链接名称替换“名称”。
关闭文件。 输入以下标签以关闭文档并在下拉菜单中指定代码结尾：
查看代码指定下拉菜单。 该代码段如下所示：Ads
忠告
- 在网站上发布之前，请务必先阅读代码。
- 上面的说明适用于将鼠标指针悬停在菜单按钮上时将起作用的下拉菜单。如果要创建仅在单击时才单击的下拉菜单，则需要JavaScript。
警告
- 当我们使用“黑色”或“绿色”之类的标记时，HTML的颜色非常有限。您可以在此处签出HTML颜色代码生成器，该生成器允许用户创建和使用自定义颜色。
