CSS Navigation Not Working Properly

[pab1953]

Having a problem with the navigation below. When I click on the links, they go to the color of the background instead of remaining white. What am I doing wrong? Thanks.

CSS

.left_col {float: left; width: 175px; padding: 15px 5px 0 15px;}
.left_col ul {margin: 0; padding: 0; list-style: none;}
.left_col a {display: block; padding: 3px; width: 160px; background: #036; border-bottom: 1px solid #eee; text-decoration: none;}
.left_col #active a {background: #036; color: #fff;}
.left_col a:link, .left_col a:visited {color: #fff;}
.left_col a:hover {background: #369; color: #fff;}

HTML

<div class="left_col">
<ul>
<li><a href="...">Item 1</a></li>
<li><a href="...">Item 2</a></li>
<li><a href="...">Item 3</a></li>
</ul>
</div>

[penders]

When you click a link, it becomes :active - it looks as if you are seeing the browser default for the :active state of your link?

Either set a color:#fff on your .left_col a {} rule - which you might as well do if all your states need to be the same. Or set:

.left_col a:active {color: #fff;}

a:active must come after your a:hover rule.

[pab1953]

The problem persists. However, when I deconstructed the page, I found that the right column seems to cause the problem. When the right column CSS is present, the left column links are not visible. When the code is removed, the links are visible (white against the blue background). What am I missing?

THE RIGHT COLUMN CSS

.right_col {float: right; width: 160px; background: #EBEBEB; padding: 15px;}
.right_col ul {font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0; list-style: none;}
.right_col a {color:#000; padding: 3px; width: 160px; text-decoration: none;}
.right_col a:link, .left_col a:visited {color: #000;}
.right_col a:hover {color: #ff0000;}
.right_col a:active {color: #000;}

[penders]

.right_col {float: right; width: 160px; background: #EBEBEB; padding: 15px;}
.right_col ul {font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0; list-style: none;}
.right_col a {color:#000; padding: 3px; width: 160px; text-decoration: none;}
.right_col a:link, .left_col a:visited {color: #000;}
.right_col a:hover {color: #ff0000;}
.right_col a:active {color: #000;}

It looks like you need to change that .left_col rule to .right_col! :)

[pab1953]

Ouch! The things in front of our noses that we don't see!

Thanks.