[SOLVED] cannot figure this out .. a:link / hover / visited problem

[severndigital]

I know this is probably very simple but i have always had a problem getting this to work. I am hoping to solve this problem forever today

 

 

i created some css information see below

.menubar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
}
.menubar a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
text-decoration: none;
}
.menubar a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
text-decoration: underline;
}

 

nothing fancy .. very simple. however,

 

when i test the code in the browser (firefox and IE) the links turn purple and become underlined after i click them.

 

I tried adding visited and active css to the code to try and defeat it. see below

 

.menubar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
}
.menubar a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
text-decoration: none;
}
.menubar a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
text-decoration: underline;
}
.menubar a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
text-decoration: none;
}
.menubar a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
text-decoration: none;
}

 

when i do that the purple underlined goes away, but i no longer get the underline on roll over.

 

this is sooooo frustrating.

 

can anyone shed some light on this for me.

 

thank you,

chris

 

 

 

 

[AndyB]

LoVe HAte helps you remember the correct sequence in which Link, Visited, Hover, Active need to be defined.

[severndigital]

thank you thank you thank you.

 

 

[bronzemonkey]

I'd just add that your code would be better off looking like this

 

.menubar, .menubar a, .menubar a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #336699;
}

.menubar a {
text-decoration: none;
}

.menubar a:hover {
text-decoration: underline;
}