我正在尝试制作自己的网站，但是我的顶栏在hovor上没有改变颜色时遇到了一些困难。如果您认为您可以提供帮助，请回答。
index.html工作正常，只是认为可能需要添加它。
<!DOCTYPE html>
<html>
<head>
<title> my site </title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<ul>
<li> <a href="gradecalc/gradecalc.html" >Grade Calculator</a>
<li> <a href="aboutme/aboutme.html" >About Me</a></li>
<li> <a href="resume/resume.html" >Résumé</a></li>
</ul>
</header>
</body>
</html>
index.css，只为标题的东西。
header ul { /*selects list of stuff*/
list-style-type: none; /*no bullet points*/
margin: 0;
padding: 0;
background-color: #70deef;
position: fixed;
width: 100%;
height: 50px;
}
header li { /*selects list element*/
float: left; /*move to left*/
}
header li a {
display: block; /*makes a rectangle*/
color: #ffffff; /*white*/
text-align: center;
text-decoration: none;
padding: 20px;
}
header li a.active { /*when hovering??*/
background-color: #d6d6d6; /*grey*/
}
我以为header li a.active会在悬停时改变颜色。为什么不这样做？
尝试使用 a:hover .不是a.active或类似的东西。
有关更多信息，请参阅 CSS ：hover 选择器、CSS 伪类或更一般的 CSS 选择器参考
header ul {
/*selects list of stuff*/
list-style-type: none;
/*no bullet points*/
margin: 0;
padding: 0;
background-color: #70deef;
position: fixed;
width: 100%;
height: 50px;
}
header li {
/*selects list element*/
float: left;
/*move to left*/
}
header li a {
display: block;
/*makes a rectangle*/
color: #ffffff;
/*white*/
text-align: center;
text-decoration: none;
padding: 20px;
}
header li a:hover {
/*when hovering??*/
background-color: #d6d6d6;
/*grey*/
}<!DOCTYPE html>
<html>
<head>
<title>my site</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<ul>
<li> <a href="gradecalc/gradecalc.html">Grade Calculator</a>
<li> <a href="aboutme/aboutme.html">About Me</a>
</li>
<li> <a href="resume/resume.html">Résumé</a>
</li>
</ul>
</header>
</body>
</html>你必须使用 css 选择器:hover
header li a:hover { /*when hovering??*/
background-color: #d6d6d6; /*grey*/
}