对于这个愚蠢的问题表示歉意。我对创建HTML网页很陌生，而我只是在一个基本主页上工作。我无法将导航栏background-color更改为任何颜色，但是:hover和.active都可以使用。我已经坚持了几天，在互联网上查找并四处移动代码以查看它是否有所作为...
请原谅我可能会犯的所有错误，并预先感谢！
当我碰到一堵看上去很简单的墙时，我会有点沮丧。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.header {
background-color: white;
padding: 15px;
position: sticky;
top: 0;
}
<!-- Menu CSS -->
.topnav {
overflow: hidden;
/*THIS BIT IS NOT WORKING, THANKS*/
background-color: red;
}
.topnav a {
color: red;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
overflow: auto;
}
.topnav a:hover {
background-color: Yellow;
color: black;
}
.topnav a.active {
background-color: red;
color: blue;
}
</style>
</head>
<body>
<div class="header">
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#services">Services</a>
<a href="#news">News and Events</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#data">Data Protection</a>
</div>
</div>
</body>
</html>似乎出现了问题，因为您正在<!-- Menu CSS -->页面的CSS部分中使用HTML注释<style>。同样的问题出现在您的样式开头。
您应该在以下<style>部分中使用CSS注释：
/* This is a CSS comment */
当您输入HTML注释而不是CSS注释时，它将仅破坏以下选择器的整体样式。其余代码不会受到影响。
另外，当我删除该评论时，导航栏仍然没有看起来应有的状态。这是因为您的导航链接<a>被设置display: inline为默认值。您必须将其更改为，display: inline-block以使其仍然对齐，但会占用一些空间（正方形）
.header {
position: sticky;
top: 0;
}
.topnav {
overflow: hidden;
background-color: gray;
display: block;
}
.topnav a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
/* You should use inline-block to make navigation links take some space */
display: inline-block;
}
.topnav a:hover {
background-color: Yellow;
color: black;
}
.topnav a.active {
background-color: red;
color: blue;
}<div class="header">
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#services">Services</a>
<a href="#news">News and Events</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#data">Data Protection</a>
</div>
</div>请参考这些参考
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句