使用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>

尝试一下 »