Hello. I have created a navigation bar. And I would like to style the links to have the current page link a different color than the other links. For example, if all of the links have a black background, I would like to have the current page link to have a white background. The reason that I would like to style them this way is so that the visitor knows what page is being visitied.
I tried different ways but all of them did not show to make any change to the links. This is what I have so far. The links work, but all of them have the same color and background. When on the home page, I would like to have the home page link to have a white background with black letters. I would appreciate your advice.
<head>
ul {
list-style-type: none;
text-align: right;
padding-top: 10px;
padding-bottom: 6px;
padding-right: 10px;
}
li {
display: inline;
}
a:link {
color: #FFF;
background-color: #000;
text-align: center;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 7px;
text-decoration: none;
}
a:visited {
color: #FFF;
background-color: #000;
text-decoration: none;
}
a:hover {
color: #000;
background-color: #FFF;
text-decoration: none;
}
a:active {
color: #FFF;
background-color: #000;
text-decoration: none;
}
a.menu:link {
color: #000
background-color: #FFF;
text-decoration: none;
}
</head>
<body>
<div class="navigation">
<ul>
<li class="menu"><a href="index.html" target="_self">HOME</a></li>
</body>
Thank you very much.