我是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>
发布于 2018-07-19 06:07:22
问题是id
在css层次结构中比类更高。因此,#navbar a
将始终覆盖.dropdown-content a
。
你可以试试这个:#navbar .dropdown-content a
。
或者,您可以重写为#navbar > a
。这将仅针对作为导航栏的直接子标记的锚标记。所以它应该忽略下拉菜单中的锚标签。
或者更好的是,不要使用id
。使用id而不是类并没有太多的好处,而且它往往会导致这种层次化的问题。
发布于 2018-07-19 06:12:35
这对你来说应该是可行的。您所需要的只是一个更具体的选择器来覆盖id
。
/* (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 */
#navbar .dropdown-content a {
float: none;
color: black;
background-color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* (6/7) DROPDOWN LINKS HOVER */
#navbar .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>
https://stackoverflow.com/questions/51411520
复制相似问题