Hover Problem

1 reply [Last post]

Tue, 2011-11-29 04:14

tqmd1

Offline

Last seen: 1 year 18 weeks ago

Regular

Pakistan

Timezone: GMT+5

Joined: 2011-10-15

Posts: 15

Points: 31

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?