我在英国上大学类(class)，我需要使用 HTML 和 CSS 创建一个网站。网站上的导航栏看起来不错，但是当我将鼠标悬停在它上面时，当任何地方都没有文本时，会有空栏突出显示并显示为可点击，这真的让我很烦恼，关于它们如何/为什么出现的任何建议？
视觉呈现的问题here
自从我关注多年前上传的视频以来，我对问题可能是什么一无所知，而且该 channel 已经很长时间没有活跃了，所以我没有费心发表评论，所以我来了。
这是我为导航栏准备的 CSS。
body {
margin:0;
padding:0;
background:#ccc;
}
.nav ul {
background-color:#344629;
text-align:center;
padding:0;
margin:0;
}
.nav li {
display: inline-block;
}
.nav a {
text-decoration:none;
color:white;
width:100px;
display:inline-block;
padding:10px 10px 10px 0px;
font-size:17px;
font-family:Helvetica;
}
.nav a:hover {
background:#5e9342;
transition: 0.4s;
}
这是 HTML 代码。
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Welcome To Lanarkshire</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Home</li>
<li><a href="#">Gallery</li>
<li><a href="#">Attractions</li>
<li><a href="#">Food & Drink</li>
<li><a href="#">Contact Us</li>
</ul>
</div>
</html>
我显然只希望突出显示和可单击的文本框。
最佳答案
关闭 anchor 标签可能会解决您的问题。 Flavio 在评论中说得对......
如:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Attractions</a></li>
<li><a href="#">Food & Drink</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
关于html - 在我网站的导航栏中，可点击的部分比我想要的要多。他们为什么在那里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56173175/