Hi
The code below pretty much works but the "active" pseudo-class doesn't seem to work, on mouse out the menu cell returns to it's original colour. Whats up with it?
Thanks!
Code....
XHTML
<div id="leftcolumn">
<!-- Left navigation column-->
<a class="nav" href="#" title="page 1">Page 1</a>
<a class="nav" href="#" title="page 2">Page 2</a>
<a class="nav" href="#" title="page 3">Page 3</a>
<a class="nav" href="#" title="page 4">Page 4</a>
<a class="nav" href="#" title="page 5">Page 5</a>
</div>
CSS
#leftcolumn {
width:200px;
height:900px;
}
a.nav, a.nav:link, a.nav:visited {
display:block;
width:200px;
height:50px;
background:#dca;
border:1px solid #000;
margin-top:0px;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#000;
line-height:25px;
overflow:hidden;}
a.nav:hover {color:#fff; background:#fff;}
a.nav:active {color:#fff; background:#fff;}
The code below pretty much works but the "active" pseudo-class doesn't seem to work, on mouse out the menu cell returns to it's original colour. Whats up with it?
Thanks!
Code....
XHTML
<div id="leftcolumn">
<!-- Left navigation column-->
<a class="nav" href="#" title="page 1">Page 1</a>
<a class="nav" href="#" title="page 2">Page 2</a>
<a class="nav" href="#" title="page 3">Page 3</a>
<a class="nav" href="#" title="page 4">Page 4</a>
<a class="nav" href="#" title="page 5">Page 5</a>
</div>
CSS
#leftcolumn {
width:200px;
height:900px;
}
a.nav, a.nav:link, a.nav:visited {
display:block;
width:200px;
height:50px;
background:#dca;
border:1px solid #000;
margin-top:0px;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#000;
line-height:25px;
overflow:hidden;}
a.nav:hover {color:#fff; background:#fff;}
a.nav:active {color:#fff; background:#fff;}