【发布时间】：2018-12-26 22:26:00
【问题描述】：
我对 HTML/CSS 还很陌生，而且我没有受过正规培训，只是把一些科学怪人的东西放在一起。现在我在主导航菜单的末尾有一个下拉菜单。问题是下拉菜单内的链接 - 我需要它们是较暗的颜色，但它们不会从主导航菜单中的浅色改变。无论我尝试什么，颜色总是一样的！出于某种原因，我什至可以更改列表中项目符号点的颜色（我也需要删除它，但这更容易），但文本保持不变。
感谢任何帮助。 :-)
/* (1/3) MAIN NAVIGATION BAR */
#navbar {
overflow: hidden;
background-color: #999900;
font-family: caviar-dreams;
}
/* (2/3) NAVIGATION LINKS */
#navbar a {
float: left;
color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
padding-left: 15px;
text-transform: uppercase;
text-decoration: none;
}
/* (3/3) NAVIGATION LINKS */
#navbar a:hover {
text-decoration-line: underline;
text-decoration-style: solid;
}
/* (1/7) DROPDOWN MENU CONTAINER */
.dropdown {
overflow: hidden;
}
/* (2/7) DROPDOWN MENU BUTTON */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding-top: 5px;
vertical-align: middle;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
/* (3/7) DROPDOWN BUTTON HOVER COLOR */
.dropdown:hover .dropbtn {
background-color: #8d7b8a;
}
/* (4/7) DROPDOWN CONTENT (HIDDEN UNTIL HOVERED) */
.dropdown-content {
display: none;
position: absolute;
background-color: #FFFFFF;
border: 1px dashed #b89abe;
width: auto;
}
/* (5/7) DROPDOWN LINKS */
.dropdown-content a {
float: none;
color: black;
background-color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* (6/7) DROPDOWN LINKS HOVER */
.dropdown-content a:hover {
background-color: #8d7b8a;
}
/* (7/7) SHOW DROPDOWN MENU ON HOVER */
.dropdown:hover .dropdown-content {
display: block;
}
/* AT LEAST THIS DID /SOMETHING/ ?
.dropdown-content ul li a
{color:green;
background-color: blue;
list-style-type: none;
} */<!DOCTYPE html>
<div class="wrapper">
<link href="style.css" rel="stylesheet" type="text/css">
<!--| NAVIGATION BAR (1/2) |-->
<div id="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Contact</a>
<!--| DROPDOWN MENU IN NAV BAR (2/2) |-->
<div class="dropdown">
<button class="dropbtn">Drop Down Menu</button>
<div class="dropdown-content">
<ul>
<li><a href="#">Art Education</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Custom Projects</a></li>
<li><a href="#">Events and Parties</a></li>
<li><a href="#">Studio Work</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
</div>
</div>
</div>【问题讨论】：
标签： html css drop-down-menu navigation