下拉菜单可以概述页面上不同类别的项目。 如果用户将键盘悬停在菜单项上，子菜单项将显示在菜单项下方。 我们可以只使用 HTML 和 CSS 代码来制作这样的菜单。 学习完本手册后，您还可以稍微更改示例来制作自己的菜单。 据悉，我们提供了每个步骤的截图，以帮助您掌握菜单的制作方法。 我们先从 HTML 代码开始，然后再了解 CSS 样式表部分。
步
方式1
超文本标记语言
1 创建 CSS 菜单的 HTML 代码框架。 我们使用带有 class="nav" 属性的 'div' 标签作为菜单的容器。 在屏幕截图中，在所示的 HTML 代码中，用一个简单的无序列表 (ul) 来表示主菜单项。
2 在主菜单区域添加链接。 在此步骤中，添加指向无序列表 (ul) 中每个项目的链接。
3 在“关于我们”下方的LI标签中添加无序列表，代表其子菜单的链接。
4 在 HTML 代码中添加样式表链接。 目前我们已经完成了HTML代码，其内容是清晰的菜单和子菜单的层次布局结构。 我们使用内置的CSS样式表，因此我们需要在代码的“head”区域添加样式表的链接。
方式2
CSS
1 创建 CSS 文件。 完成HTML框架代码后，我们需要使用样式表来实现以下菜单功能。 我们使用 CSS 选择器来定位 HTML 中的菜单项html5菜单栏，因此无需向 HTML 添加额外的 ID 或类属性。 我们通过在UL中嵌入UL来定位子菜单，并使用display:none; 属性来隐藏它。 当键盘悬停在LI元素上时，我们需要将其转换为块模式并重新显示相应的子菜单html5菜单栏，而>命令可以定位键盘悬停的LI元素。
2 使用 CSS 样式表显示主菜单。 职位：亲属； 声明子菜单相对于主菜单显示。 显示：内联块； 声明菜单可以调整到适当的厚度。
3 设置键盘悬停时的字体渐变颜色。图中的代码将链接悬停时变成黄色渐变背景、红色文字的字体
4 使用样式表显示子菜单。 当前子菜单样式继承主菜单元素。 我们希望子菜单项垂直显示在主菜单项的下方。
5 定位下拉菜单并对齐菜单项。 这也将清除蓝色背景。 职位：亲属； 语句必须添加到列表项的顶部。 位置：绝对； 声明必须添加到相对位置定位列表中。
