CSS 下拉菜单

❮ 上一页 下一页 ❯

使用 CSS 创建一个可悬停的下拉菜单。

演示：下拉菜单示例

将鼠标悬停在下面的示例上

下拉文本

Hello World!

下拉菜单

链接 1 链接 2 链接 3

其他：

美丽的五渔村

基本下拉菜单

创建一个下拉框，当用户将鼠标悬停在元素上时出现。

示例

自己动手试一试 »

示例解释

HTML) 使用任何元素打开下拉内容，例如 或 元素。

使用容器元素（如

）创建下拉内容，并在其中添加您想要的任何内容。

在元素周围包裹一个

元素，以便使用 CSS 正确地定位下拉内容。

CSS) .dropdown 类使用 position:relative，这在我们需要将下拉内容放置在下拉按钮正下方（使用 position:absolute）时是必需的。

.dropdown-content 类包含实际的下拉内容。默认情况下它是隐藏的，悬停时会显示（见下文）。请注意 min-width 设置为 160px。您可以随时更改它。提示： 如果您希望下拉内容的宽度与下拉按钮一样宽，请将 width 设置为 100%（并设置 overflow:auto 以在小屏幕上启用滚动）。

我们没有使用边框，而是使用了 CSS box-shadow 属性，使下拉菜单看起来像一个“卡片”。

:hover 选择器用于在用户将鼠标移到下拉按钮上时显示下拉菜单。

下拉菜单

创建下拉菜单，允许用户从列表中选择一个选项

下拉菜单

链接 1 链接 2 链接 3

此示例与上一个类似，只是我们在下拉框中添加了链接，并对它们进行了样式设置，以匹配样式化的下拉按钮

示例

Dropdown