Why is the a:visited style not working?
Noradc Sep 3, 2013 8:49 AMHello. I have created a horizontal menu and would like the a:visited text and background colors to be the reverse of a:link. The a:link and the a:hover work well. But when I make the a: visited color and background color different from a:link, all of the links text turn black and the background turns white for all of them. The links were not cicked on. But when a link was clicked on, a thin border of the text color appears around the box surrounding the link that was clicked on. I would appreciate knowing how to correct this. I have included the following styling link information that is in the head and body of the the html and css documents :
html document: css document:
ul { .navigation {
list-style-type: none; width: 960px;
text-align: right; height: 50px;
padding-top: 6px; margin-top: 50px;
padding-bottom: 6px; font-size: 18px;
z-index: 5
} }
li {
display: inline;
}
a:link {
color:#FFF;
text-decoration: none;
background-color:#000;
text-align: center;
padding: 0px;
}
a:visited {
text-decoration: none;
color: #000;
background-color: #FFF;
}
a:hover {
text-decoration: none;
color:#000;
background-color:#FFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
background-color: #000;
}
</head>
<body>
<div class="navigation">
<ul>
<li><a href="index.html" target="_self">HOME</a></li>
<li><a href="digital.html" target="_self">DIGITAL</a></li>
<li><a href="drawing.html" target="_self">DRAWING</a></li>
<li><a href="painting.html" target="_self">PAINTING</a></li>
<li><a href="about.html" target="_self">ABOUT</a></li></ul>
</div>
</body>
Thank you.


