下拉菜单是我们现在在网络上看到的一种常见的 UI 模式。它有助于分块显示相关信息，而不会用按钮、文本和选项让用户感到不知所措。大多数情况下，它出现在导航栏或网站标题中。
在 Pure CSS 的帮助下，我们可以轻松创建这样的下拉菜单。
方法：创建带下拉菜单的水平菜单考虑以下几点。
- 菜单的所有组件都应该包含在一个名为“ pure-menu pure-menu-horizontal ”的类中。
- 在主标题或标题的 元素中添加类“ pure-menu-heading ”。
- 然后在类“ pure-menu-list ”的
- 元素中添加标题后的所有项目。每个项目都应该包含在
- 元素中，类为“ pure-menu-item ” 。
- 要为特定列表项创建下拉菜单，请在
- 元素内添加类“ pure-menu-has-children ”。添加类名“ pure-menu-allow-hover ”以在悬停时显示子菜单。将子菜单的所有项目添加到
- 元素中，类为“ pure-menu-children ” 。每个项目都应该包含在
- 元素中，类为“ pure-menu-item ” 。
- 如果你想将一个项目与你的网页的某个部分链接，你可以进一步将它包含在 元素中，类为“ pure-menu-link ” 。
示例：在本示例中，我们将创建一个水平菜单。
HTML
HTML
输出：
用于创建带有下拉菜单的垂直菜单：对于创建此类菜单，从开头的分区中删除类名“ pure-menu-horizontal ”。默认情况下，菜单项占据容器宽度的 100%，因此我们必须通过将显示设置为 inline-block 来限制宽度。
示例：在本示例中，我们将创建一个垂直菜单。
HTML
输出：
