html 下拉列表对齐,CSS 下拉菜单

下拉式菜单

创建一个下拉菜单，并允许用户从列表中选择一个选项：

本例与上例相似，除了我们在下拉框内添加链接并为其设置了样式，以此匹配下拉按钮的样式：

实例

/* 设置下拉按钮的样式 */

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

/* 容器

- 需要放置下拉内容 */

.dropdown {

position: relative;

display: inline-block;

}

/* 下拉内容(默认隐藏) */

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

/* 下拉链接 */

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

/* 悬停时更改下拉链接的颜色 */

.dropdown-content a:hover {background-color: #f1f1f1}

/* 悬停时显示下拉菜单 */

.dropdown:hover .dropdown-content {

display: block;

}

/* 显示下拉内容时，更改下拉按钮的背景颜色 */

.dropdown:hover .dropbtn {

background-color: #3e8e41;

}

Dropdown

Link 1

Link 2

Link 3