CSS 如何制作下拉菜单

下拉菜单

.dropdown 类使用 position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute）时，需要使用该类。

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

我们用了 CSS box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片”。

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

下拉按钮

如果希望下拉菜单从右到左而不是从左到右，添加 right: 0

 左边为下拉菜单从左到右，右边为下拉菜单从右到左：

 

下拉式图像

在导航栏中添加下拉菜单