CODEWITHSUNDEEP
htmlcss
Opie Winston
Opie Winston

Reputation: 79

Using :visited on links doesn't work properly

I have issue with pseudo class :visited on my links. Pseudo classes in my CSS are in right order, but :visited doesn't work. When I define it, all links on page automatically become "visited" although I haven't visited them.

Here is the code: 

.drop-menu a:link {
    text-decoration: none;
    color: #9d9d9c;
}
.drop-menu a:visited {
    text-decoration: none;
    background-color: #174c90;
    color: #ffffff;
}
.drop-menu a:focus {
    text-decoration: none;
    background-color: #512c6f;
    color: #ffffff;
}
.drop-menu a:hover {
    text-decoration: none;
    background-color: #9e0243;
    color: #ffffff;
}
.drop-menu a:active {
    text-decoration: none;
    background-color: #781759;
    color: #ffffff;
}
<ul class="drop-menu">
  <li><a href="">HOME</a></li>
  <li><a href="">ABOUT US</a></li>
  <li><a href="">OUR WORK</a></li>
  <li><a href="">CONTACT</a></li>
</ul>

What am I doing wrong? Thanks in advance!

Upvotes: 2

Views: 135

Answers (1)

doğukan
doğukan

Reputation: 27389

in href should be filled. so, href="#" . this is working.

.drop-menu a:link {
    text-decoration: none;
    color: #9d9d9c;
}
.drop-menu a:visited {
    text-decoration: none;
    background-color: #174c90;
    color: #ffffff;
}
.drop-menu a:focus {
    text-decoration: none;
    background-color: #512c6f;
    color: #ffffff;
}
.drop-menu a:hover {
    text-decoration: none;
    background-color: #9e0243;
    color: #ffffff;
}
.drop-menu a:active {
    text-decoration: none;
    background-color: #781759;
    color: #ffffff;
}
<ul class="drop-menu">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">OUR WORK</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>

Upvotes: 4

Related Questions