While working on the navigation bar styling, I encountered an issue. I added multiple <li> elements with anchor elements for links, but the text color is not loading on previously clicked links.
The files for Order and Main Page are created in the folder, while Gallery and Pricing are not present in the folder. The styled color is only loading for the existing files.
The CSS rule li a:hover is functioning correctly for all elements.
/* NAV Section - Start! */
nav {
background: #55595c;
max-height: 90px;
}
nav img {
position: relative;
left: 880px;
bottom: 55px;
height: 120px;
width: 150px;
}
.nav ul {
list-style-type: none;
overflow: hidden;
display: flex;
justify-content: center;
position: relative;
top: 25px;
left: 500px;
}
.nav li {
color: #4128ba;
float: left;
font: 16;
text-decoration: none;
}
.nav li a {
padding: 10px;
display: block;
}
.nav li a:hover {
color: #00ffff;
}
/* NAV Section - End! */
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="assets/logo2.png" type="icon/x-icon">
<title>H&L Equipment - Main!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation Bar - Start! !-->
<nav>
<div class="nav">
<ul>
<li><a href="order.html">Order</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="index.html">Main Page</a></li>
</ul>
</div>
<div class="img">
<img src="assets/logo2.png">
</div>
</nav> <br>
<!-- Navigation Bar - END! !-->
<!-- Showcase - Start! !-->
<h2 id="h2-showcase">What do we offer?</h2>
<p id="p-showcase">We offer multiple high-quality bodybuilding equipment!</p> <br> <br>
<!-- Showcase - End! !-->
</body>
<!-- Showcase Photos - Start! !-->
<div class="showcase-photos">
</div>
<!-- Showcase Photos - End! !-->
<br> <br>
<!-- Login Form !-->
</html>