When I hover over the links in my drop-down menu, they are supposed to turn light blue. This works perfectly on my index.html page. However, when I visit the root URL of my website, the color change does not happen and stays as the standard color. I have tried using !important but it didn't work, and it doesn't seem necessary since it functions correctly on index.html.
Head tag:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Filthy Hippie, a Petz 3/4 fansite</title>
<link rel="icon" type="image/x-icon" href="/favicon.gif">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Dropdown Menu CSS:
.topnav {
overflow: hidden;
background-color: #502f2f;
font-size: 20px;
font-family: 'Press Start 2P', serif;
text-shadow: 2px 2px 2px #442828;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.topnav a {
float: left;
display: block;
color: #e794ad;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
...