我刚刚开始学习HTML和CSS，我想制作一个导航栏。我遇到了一个问题，当我将鼠标悬停在链接上时，每个链接下面都有这种奇怪的填充，如图 1 和图 2 所示。有没有什么方法可以在不删除填充的情况下解决该问题？
谢谢
*浏览器：Microsoft Edge 126.0.2592.87
<html>
<head>
<meta charset="utf-8">
<title>Blank template</title>
<!-- Load external CSS styles -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><a href="home.html">Home</li>
<li><a href="projects.html">Projects</li>
<li><a href="about.html">About</li>
</ul>
</nav>
</header>
<h1>Yang Tri Phu</h1>
</body>
</html>
h1 {
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-weight: normal;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #131842;
}
.navbar a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
}
.navbar a:hover {
background-color: #405D72;
}
我正在关注此视频，并期待视频中显示的类似结果。
出现问题是因为您没有关闭
<a><nav><ul><li><a>nav {
background-color: #131842;
}
nav a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
}
nav a:hover {
background-color: #405D72;
}
h1 {
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-weight: normal;
}<header>
<nav>
<a href="home.html">Home</a>
<a href="projects.html">Projects</a>
<a href="about.html">About</a>
</nav>
</header>
<h1>Yang Tri Phu</h1>