Currently enrolled in a university program in the UK, I am tasked with creating a website using HTML and CSS. The navigation bar on my site appears to be functioning properly at first glance, but upon hovering over it, empty bars highlight as if they are clickable, which is quite frustrating. Any insights into why this issue may have arisen?
You can visually see the problem here
Despite following an old tutorial video from a dormant YouTube channel, I am clueless about what could be causing this discrepancy. Since there has been no recent activity on the channel, I decided to seek help here instead.
Here is the CSS code for the navigation bar:
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;
}
And here is the HTML code:
<!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>
I am aiming for only the text boxes in the navigation bar to be highlighted and clickable, nothing else.