Dear Sir,
I have following codes
<html>
<style type="text/css">
#button {
position: absolute;
top: 220px;
width: 150px;
border-right: 1px solid #508fc4;
padding: 5px 5px 15px 1px;
margin-bottom: 10px;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button ul li {
border-bottom: 1px solid #90bade;
margin: 0; width: 140px;
text-decoration: none;
}
#button ul li a:link {
display: block;
padding: 5px 5px 5px 1px;
border-left: 10px solid #1958b7;
border-right: 1px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 140px;
text-indent: 2px;
}
#button ul li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: orange;
color:#fff ;
width: 140px;
}
#button ul li a:visited {
display: block;
text-indent: 2px;
padding: 5px 5px 5px 1px;
border-left: 10px solid #1958b7;
border-right: 1px solid #508fc4;
text-decoration: none;
width: 140px;
background-color: #2175bc;
color: #fff;
}
</style>
<body>
<div id="button">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="directors.html">Directors</a></li>
<li><a href="#">contacts</a></li>
<li><a href="feedback.html">Feedback</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
</html>Move cursor accross all links
You will see hover is working fine with background-color:orange
Now click any link then move cursor again on menu
You will see there is no background-color:orange on VISITED LINK.
I want hover must work both on visited and non visited links.
Please check what is wrong with my codes?
