Active sidebar item issues

[j.blaise.n]

I'm having issues with the sidebar on my page

http://www.brsr.org/

Two of the menu items, Home and Common Questions, don't stay in their active state after being clicked on and I'm not sure why. Here's what the CSS for the sidebar looks like:

/* sidebar nav */
#sidebar { width: 183px; float: left; margin-bottom: 25px; margin-top: 10px; }
#sidebar ul { list-style-type: none; }
#sidebar li a { padding: 8px 0 8px 8px; width: 95%; display: block; background: url(img/sidebar-li-a.gif) repeat-x 0px 0px; color: #FFF; font-weight: bold; text-decoration: none; }
#sidebar li a:hover { background: url(img/sidebar-li-a.gif) repeat-x 0px -30px; }
#sidebar li a:active, #sidebar li .onpage  { background: url(img/sidebar-li-a.gif) repeat-x 0px -30px; }
#sidebar li a.commerial { background: url(img/commerical-button.gif); color: #ff8400; font-weight: normal; padding-left: 27px; margin-top: 2px; width: 155px; }
#sidebar li a.commerial:hover { color: #000; }

Any ideas on what could be causing the problem would be appreciated. Thanks!

 

[LouTheDesigner]

I'm using firefox, and I only notice the problem with the Home button, not the Common Questions button.

The problem is in the hover pseudo class, which is overriding the active class. Set your classes in the following order:

:link
:visited
:focus
:hover
:active

The bottom class should override the rest.

Hope this helps,

Lou