gpt4 book ai didi

html - CSS:设置下拉菜单列表的样式,但链接样式不会从主导航样式改变

转载 作者:太空宇宙 更新时间:2023-11-04 07:08:02 25 4
gpt4 key购买 nike

我是 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>

最佳答案

问题是 id 在 css 层次结构中比类更高。所以 #navbar a 将始终覆盖 .dropdown-content a

你可以试试这个:#navbar .dropdown-content a

或者你可以重写为#navbar > a。这将只针对作为导航栏直接子项的 anchor 标记。所以它应该忽略下拉列表中的 anchor 标记。

或者更好的是,不要使用 id。在类上使用 id 并没有太多好处,而且它往往会导致这类层次结构问题。

关于html - CSS:设置下拉菜单列表的样式,但链接样式不会从主导航样式改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51411520/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com