Links don't shove hover after first access in IE

My css works fine in firefox, but after you click on a link once in ie, it nolonger shows the color-switch when I hover.

.topnav:link { COLOR: #FFFFFF; TEXT-DECORATION: none; font-weight: 800}
.topnav:hover { COLOR: #c0c0c0; TEXT-DECORATION: none; font-weight: 800}
.topnav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none; font-weight: 800}

If I leave the "visited" out, it leaves the link black after a visit

 

of course it will you should change the text-decoration from none to...(complete what you want)

 

You are wasting too much time declaring the same child properties over and over again... Try this:

.topnav { 
	color:#FFF;
	text-decoration:none;
	font-weight:800;
}

.topnav:active,
.topnav:focus,
.topnav:hover {
	color:#CCC;
}

Code (markup):

The first one without the psuedostate sets the value for ALL psuedostates. Then all you have to set on the psuedo is what is DIFFERENT. If you are saying the same value on each pseudo over and over again, you are forgetting the point of CSS.

On that note, being that says "topnav" are there more than one of them? It that like a list of anchors? What HTML are you applying it to?

If you are doing

<a href="#" class="topnav">Item 1</a> | 
<a href="#" class="topnav">Item 2</a> | 
<a href="#" class="topnav">Item 3</a> 

Code (markup):

Miserable /FAIL/ becuase it should be a list and since they all get the same class there's no reason to use a class on them.

If it's a list and you have

<div id="topnav">
	<ul id="topnavul">
		<li class="topnavli">
			<a href="#" class="topnav">Item 1</a> | 
		</li>
		<li class="topnavli">
			<a href="#" class="topnav">Item 2</a> | 
		</li>
		<li class="topnavli">
			<a href="#" class="topnav">Item 3</a>
		</li>
	</ul>
</div>

Code (markup):

Even bigger miserable /FAIL/ since you probably don't need the wrapping div, don't need the classes on the li or anchors and should probably be using border instead of vertical breaks.

Which is why your markup propbably should be:

<ul id="topMenu">
	<li class="first">
		<a href="#">Item 1</a>
	</li><li>
		<a href="#">Item 2</a>
	</li><li>
		<a href="#">Item 3</a>
	</li>
</ul>

Code (markup):

Then all you have to do is target your anchors thus:

#topMenu a {
	color:#FFF;
	text-decoration:none;
	font-weight:800;
}

#topMenu a:active,
#topMenu a:focus,
#topMenu a:hover {
	color:#CCC;
}

Code (markup):

The moment I see classes targeting anchors directly with a class like 'topnav' I automatically assume these types of rookie mistakes are present.