How to make a css navigation menu "selected" option still clickable

Question

So I have a fairly simple vertical CSS menu based off of UL.

<ul class="vertnav">
<li><a href="unselected1.php">Item1</a></li>
<li><a href="unselected2.php">Item2</a></li>
<li><a href="selected.php" class="vertnavdown">Selected</a></li>
</ul>

I want three basic colors (say tan for default LI, orange for VERTNAVDOWN, and red for A:HOVER. However I can't seem to get the vertnavdown class to inherit right, and the .vertnav li a:visited overrides it every time. if I use !important to force it through I can't seem to also get the hover to work.

Any suggestions? I thought I understood inheritance in CSS but I guess I don't.

.vertnav{
list-style: none;
margin: 0px;
width: 172px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
height: 45px;
}
.vertnav li{
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border-bottom: 0px none;
border-right: 0px none;
border-top: 1px solid #fff;
border-left: 0px none;
text-align: left;
height: 45px;
width: 172px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

.vertnav li a{
display: block;
text-align: left;   
color: #666666;
font-weight: bold;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:visited{
display: block;
text-align: left;   
color: #666666;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:hover{
color: white;
background-color: #ffbf0c;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 45px;
text-decoration: none;
font-weight: bold;
}
.vertnavdown a
{
display:block;
color: #FFF;
background-color: #ff9000;
}
.vertnavdown a:hover
{
background-color: #ffbf0c;
}

^^^^^^^^^^^^^ Edited to add CSS. ^^^^^^

Answer 1

It would help if you could post the css as well.

What you normally need is something like this

<ul id="nav">
<li><a>one</a></li>
<li class="active"><a>two</a></li>
</ul>

the css would be:

#nav li{
color: red;
}
#nav li a:visited{
color: green;
}
#nav li.active a{
color: blue;
}

you need to be more specific with the active css naming.

Answer 2

Try with .vertnav li a:visited .vertnavdown

Answer 3

.vertnav li a:visited is very specific, and in CSS, more specific overrides less specific, even if the less specific CSS comes later in the inheritance chain.

.vertnavdown on it's own will always be overridden by .vertnav li a:visited -- the best solution is to be more specific with your description of .vertnavdown.

Changing .vertnavdown a and .vertnavdown a:hover to
.vertnav ul li a.vertnavdown .vertnav ul li a.vertnavdown:hover will fix your problem.

EDIT:

Smacks head Apologies, I should have noted that you were trying to fix a problem with the :visited links ... Since you haven't specified a style for a.vertnavdown:visited it inherits the style of .vertnav a:visited.

The solution then is to add a.vertnavdown:visited to whatever style declaration you want it to inherit from. That should fix the problem.