使用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>
尝试一下 »
页:
[1]