I'm currently facing an issue while learning web development. The expected result only appears when I preview my website on an old version of Internet Explorer, but it doesn't show up correctly when opened on Firefox or Chrome.
The code I have is very simple. It's supposed to change the color of links when visited, but instead, it keeps applying the 'visited' properties to all my text.
My goal is to simply change the color of the link while in the 'link' and 'visited' state.
HTML :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="CSSworking.css">
<title>Html Working</title>
</head>
<body>
<ul class="main">
<li><a href="#">Home</a></li>
<li><a href="#">Our Kitchen</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Go Down</a></li>
</ul>
</body>
</html>
Here is the CSS:
.main {
text-decoration: none;
list-style:none;
margin-left: 60px;
}
.main li {
display: inline-block;
margin: 20px;
}
.main li a:link {
color:pink;
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
border-top: 4px solid red;
}