怎么使用HTML和CSS制作下拉菜单

下拉菜单可以在页面上分级显示不同类别的项目。如果用户将鼠标悬停在菜单项上，菜单项下会显示子菜单项目。我们仅使用HTML和CSS代码就可以制作这样的菜单。学习这篇指南后，你就能在示例上稍作修改，制作属于自己的菜单。此外，我们为每个步骤提供了截图，帮助你掌握制作菜单的方法。我们先从HTML代码开始学习，稍后再学习CSS样式表部分内容。

方法 1 的 2:

HTML

1 创建CSS菜单的HTML代码框架。我们使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
2 在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
3 在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
4 在HTML代码中添加样式表链接。目前我们已经完成了HTML代码，其内容是一个清晰的菜单和子菜单的层次布局结构。我们使用外置的CSS样式表，因此需要在代码的‘head’区域添加样式表链接。

方法 2 的 2:

CSS

{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/a\/af\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-4.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/a\/af\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 创建CSS文件。完成HTML框架代码后，我们需要使用样式表来实现下列菜单功能。我们使用CSS选择器来定位HTML中的菜单项，因此无需在HTML中添加额外的ID或class属性。
- 我们通过UL内嵌UL的方式来定位子菜单，并使用display:none;属性将其隐藏。
- 在鼠标悬停在LI元素上时，我们需要将其转换为block模式，重新显示相应的子菜单，而>命令可以定位鼠标悬停位置的LI元素。
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/0\/08\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-4.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/0\/08\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 使用CSS样式表显示主菜单。
- position:relative;声明让子菜单根据主菜单相对位置显示。
- display:inline-block;声明可以将菜单调整到合适宽度。
3 设置鼠标悬停时的字体渐变颜色。图示中的代码在悬停时，将链接变为深色渐变背景和白色文字的字体
4 使用样式表显示子菜单。当前子菜单样式继承主菜单元素。我们要让子菜单项垂直显示在主菜单项下方。
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/e\/e5\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-4.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-4.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/e\/e5\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-4.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 定位下拉菜单，并将菜单项对齐。这将会同时去除灰色背景。
- position:relative;声明必须添加到列表项顶端。
- position:absolute;声明必须添加到相对位置定位的列表中。