DropDown Menus in CSS

在这篇文章中，我们收集了来自 CodePen、GitHub 和其他可靠网站的几个免费 HTML 和 CSS 下拉菜单代码示例。下拉菜单是组织和呈现网站导航选项的一种常见且有效的方式。您可以从我们的下拉菜单选择中为您的网站选择最合适的设计，这些设计包括水平和垂直菜单、巨型菜单和多级菜单。

下拉菜单是一种视觉控件元素，允许用户从选项列表中选择一个值。在用户点击某个值启动下拉列表之前，下拉列表只显示一个级别。

当点击菜单的顶级标题时，会出现一个带有更多选项的下拉菜单。您可以使用这些菜单浏览网站并访问所有可用内容，包括所有子类别。如果您的网站设计精良，它将成为您客户的一个组织良好的空间。

CSS HTML（超文本标记语言）和 CSS（层叠样式表）都用于下拉菜单。除了 HTML 和 CSS，JavaScript 还可以创建独特的下拉菜单。但是，本指南仅涵盖 CSS 和 HTML。因此，本课程不包含 JavaScript。

正如您从之前的课程中所知，CSS 为您的网页添加艺术设计元素，而 HTML 是组织网页及其内容的基础代码。

本文将教您如何制作自定义 CSS 多层下拉菜单。您还将遇到一些创新的设计组件。像 Notepad ++ 这样的基本代码编辑器就能满足您的需求。

CSS 中的下拉菜单

下拉菜单是交互式网站最重要的组成部分之一。下拉菜单是使用 CSS 创建的。下拉菜单是由一组列表组成的，这些列表排列在无序列表（在 HTML 世界中通常称为 ul）的下方。下拉菜单结构是使用 ul 标签下的嵌套列表（li）标签制作的。使用 CSS 为结构的组件添加样式以强调所需的视觉效果。下拉菜单的制作使用了极其简单的 CSS 属性。

输出

示例：向 HTML 代码添加 CSS 属性以构建交互式下拉菜单结构。

输出

基于下拉菜单结构，先前创建的代码实现了所需的结果。下面，我们将解释一些重要的 HTML 代码元素。

1. 最外层的容器是 nav。
2. 我们设置了 nav ul li: ul li 的 float 值为 none，这样当鼠标悬停在其上时它不会移动。
3. 使用相对定位来移动或修改 li 相对于其组件的位置。
4. 使用 hover 后面的 '>' 命令来显示悬停如何影响紧跟在其后的 li 中的 ul。

居中的下拉菜单

右对齐的下拉菜单的 float 值设置为 right，以便在屏幕右侧显示下拉菜单内容。包含内容的 div 应添加 float right。

输出