我正在制作一个导航栏，并尝试遵循https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_gray。
我的导航栏无法正常工作。当我将鼠标悬停在列表对象上时，我只会看到文本及其背景变小的颜色，而不是整个块。如何使整个块变色？
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="default.css">
<title>My Dashboard</title>
</head>
<body>
<!--Navigation Bar-->
<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="weather.html">Weather</a></li>
<li><a href="time.html">World Time</a></li>
<li><a href="help.html">Help</a></li>
</ul>
<!--Navigation Bar End-->
</body>
</html>
default.css：
/*Importing Fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900');
/*Finish Import*/
#navbar{
font-family: "Raleway SemiBold", serif;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #13006e;
display: block;
}
#navbar li {
color: white;
display: block;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover{
color:white;
background-color: #008000;
}
谢谢！
Neeron。
最佳答案
您只需要在navbar li中添加标签即可。
/*Importing Fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900');
/*Finish Import*/
#navbar{
font-family: "Raleway SemiBold", serif;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #13006e;
display: block;
}
#navbar li a{
color: white;
display: block;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover{
color:white;
background-color: #008000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="default.css">
<title>My Dashboard</title>
</head>
<body>
<!--Navigation Bar-->
<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="weather.html">Weather</a></li>
<li><a href="time.html">World Time</a></li>
<li><a href="help.html">Help</a></li>
</ul>
<!--Navigation Bar End-->
</body>
</html>