使用CSS设置下拉菜单样式：元素包裹及样式设置要点

元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

采用逗号分隔符，可将下拉列表项置于下拉按钮右下方。

这个区域是真正的下拉列表，初始状态下不显示，当鼠标停留在特定项目上时会显现出来。务必保证最小宽度是160像素，这个数值可以根据需要调整。提醒：若要让下拉内容与触发按钮的尺寸相同，可以把宽度设为100%，而使用自动值则能在小屏幕上实现滚动效果。

我们使用 box- 属性让下拉菜单看起来像一个"卡片"。

当鼠标指针移向下拉按钮时，下拉菜单会呈现出来，这是通过:hover选择器实现的。

下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项：

这个案例与之前的案例相似，当我们向选择框中加入了网址，并且调整了外观，

实例

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre class="brush:xhtml;gutter:false"> <style> /* 下拉按钮样式 */ .dropbtn { 底色是十六进制代码#4CAF50的绿色，这种颜色用于界面元素的背景部分，它呈现出一种鲜明的自然绿色调，给人带来清新舒适的感觉。 color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* 容器 <div> - 需要定位下拉内容 */ .dropdown { position: relative; display: inline-block; } /* 下拉内容 (默认隐藏) */ .dropdown-content { display: none; position: absolute; 底色为浅灰色,具体为十六进制#f9f9f9的颜色值 min-width: 160px; 阴影效果向下滑动八像素，向右移动十六像素，向外扩展零像素，向内收缩零像素，颜色为黑色，不透明度为百分之二十。 } /* 下拉菜单的链接 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 鼠标移上去后修改下拉菜单链接颜色 */ 下拉列表项在鼠标移上时，背景色会变成浅灰色 /* 在鼠标移上去后显示下拉菜单 */ 鼠标移入下拉列表时，其包含的内容区域会显示出来 display: block; } /* 当下拉内容显示后修改下拉按钮的背景颜色 */ .dropdown:hover .dropbtn { 底色呈现为特定绿调，具体色值为十六进制#3e8e41，属于深浅适中的绿色系，能够带来自然沉稳的视觉效果 } </style> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> 菜鸟学堂 1 菜鸟学堂 2 菜鸟学堂 3 </div> </div></pre></p>

尝试一下 »

下拉内容对齐方式float:left;

float:right;

若需设定右侧悬浮的下拉列表项内容排列方向为右向左，而非左向右，可运用以下指令 right: 0;

实例

<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre class="brush:xhtml;gutter:false"> .dropdown - content { right: 0; }</pre></p>

尝试一下 »

# 使用CSS设置下拉菜单样式 # 元素包裹及样式设置要点 # 鼠标 # 菜鸟 # 明度 # 这是 # 当鼠标 # 二十 # 设为 # 当我们 # 向外 # 可将 # 而非 # 呈现出 # 可以根据 # 若要 # 上时 # 值为 # 框中 # 不透 # 向内 # 背景色