我正在英国上大学课程，我需要使用 HTML 和 CSS 创建一个网站。网站上的导航栏看起来不错，但是当我将鼠标悬停在它上面时，当任何地方都没有文本时，有一些空栏突出显示并显示为可点击，这真的让我烦恼，关于它们如何/为什么出现的任何建议？
此处以视觉方式呈现的问题
自从我关注了几年前上传的视频并且该频道很长一段时间没有活跃以来，我对问题可能是什么一无所知，所以我没有打扰评论，因此我来到这里。
这是我用于导航栏的 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>
我显然只想要突出显示和可点击的文本框。
关闭锚标签可能会解决您的问题。弗拉维奥在评论中说得对......
如：
<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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句