如何操作 - 导航栏中的更多按钮

步骤 2) 添加 CSS

示例

/* 导航栏容器 */.navbar { overflow: hidden; background-color: #333; font-family: Arial;}/* 导航栏中的链接 */.navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}/* 下拉菜单容器 */.dropdown { float: left; overflow: hidden;}/* 下拉按钮 */.dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* 对手机上的垂直对齐很重要 */ margin: 0; /* 对手机上的垂直对齐很重要 */}/* 鼠标悬停在导航栏链接上时添加红色背景色 */.navbar a:hover, .dropdown:hover .dropbtn { background-color: red;}/* 下拉菜单内容（默认隐藏） */.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 { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}/* 鼠标悬停在下拉菜单链接上时添加灰色背景色 */.dropdown-content a:hover { background-color: #ddd;}/* 鼠标悬停在下拉按钮上时显示下拉菜单 */.dropdown:hover .dropdown-content { display: block;}

自己动手试一试 »

示例解释

我们已经用背景色、内边距等样式化了导航栏和导航栏链接。

我们用背景色、内边距等样式化了下拉按钮。

.dropdown 类是 .dropdown-content 的容器。由于这是一个