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

hwyzw

    元素来包裹这些元素，并使用 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>
    尝试一下 »