CSS maldito

Ola pessoas vejam so minha situação

Tenhu uma pagina em JSP, e nela uso Javascript e tenho uma classe separada para tratar o CSS como manda o contexto.

O problema é o seguinte tenho 3 botoes nesta pagina botaoA botaoB e botaoC, cada um dos botoes abre paginas diferentes, quando passo o mouse em cima do botao ele muda a cor conforme o meu codigo abaixo, porém n sei pq o active n funciona, quando eu clico no botao ele carrega a pagina mas o botaoA continua da sua cor padrao o active nao pega
vejam:

#menu {float:right;padding:52px 0 0 0}
#menu li {float:left;padding-left:1px}

#menu li a {display:block;font-size:15px;color:#000;text-decoration:none;line-height:60px;background:url(../images/menu_bg.gif) top repeat-x;height:56px;overflow:hidden;cursor:pointer}
#menu li a span {display:block;background:url(../images/menu_bg_left.gif) top left no-repeat}
#menu li a span span {background:url(../images/menu_bg_right.gif) top right no-repeat;padding:0 32px;height:56px}

#menu li a:hover, #menu #menu_active a {color:#fff;background:url(../images/menu_bg_active.gif) top repeat-x}
#menu li a:hover span, #menu #menu_active a span {background:url(../images/menu_bg_left_active.gif) top left no-repeat}
#menu li a:hover span span, #menu #menu_active a span span {background:url(../images/menu_bg_right_active.gif) top right no-repeat}
#menu .nav1 a:hover, #menu .nav1#menu_active a {background:url(../images/menu_nav3_bg.gif) top repeat-x}
#menu .nav1 a:hover span, #menu .nav#menu_active a span {background:url(../images/menu_nav3_left.gif) top left no-repeat}
#menu .nav1 a:hover span span, #menu .nav1#menu_active a span span {background:url(../images/menu_nav3_right.gif) top right no-repeat}
#menu .nav2 a:hover, #menu .nav2#menu_active a {background:url(../images/menu_nav5_bg.gif) top repeat-x}
#menu .nav2 a:hover span, #menu .nav2#menu_active a span {background:url(../images/menu_nav5_left.gif) top left no-repeat}
#menu .nav2 a:hover span span, #menu .nav2#menu_active a span span {background:url(../images/menu_nav5_right.gif) top right no-repeat}
#menu .nav3 a:hover, #menu .nav3#menu_active a {background:url(../images/menu_nav5_bg.gif) top repeat-x}
#menu .nav3 a:hover span, #menu .nav3#menu_active a span {background:url(../images/menu_nav5_left.gif) top left no-repeat}
#menu .nav3 a:hover span span, #menu .nav3#menu_active a span span {background:url(../images/menu_nav5_right.gif) top right no-repeat}

#menu li a:active, #menu #menu_active a {color:#fff;background:url(../images/menu_bg_active.gif) top repeat-x}
#menu li a:active span, #menu #menu_active a span {background:url(../images/menu_bg_left_active.gif) top left no-repeat}
#menu li a:active span span, #menu #menu_active a span span {background:url(../images/menu_bg_right_active.gif) top right no-repeat}

#menu .nav1 a:active, #menu .nav1#menu_active a {background:url(../images/menu_nav5_bg.gif) top repeat-x}
#menu .nav1 a:active span, #menu .nav1#menu_active a span {background:url(../images/menu_nav5_left.gif) top left no-repeat}
#menu .nav1 a:active span span, #menu .nav1#menu_active a span span {background:url(../images/menu_nav5_right.gif) top right no-repeat}
#menu .nav2 a:active, #menu .nav2#menu_active a {background:url(../images/menu_nav5_bg.gif) top repeat-x}
#menu .nav2 a:active span, #menu .nav2#menu_active a span {background:url(../images/menu_nav5_left.gif) top left no-repeat}
#menu .nav2 a:active span span, #menu .nav52#menu_active a span span {background:url(../images/menu_nav5_right.gif) top right no-repeat}
#menu .nav3 a:active, #menu .nav3#menu_active a {background:url(../images/menu_nav5_bg.gif) top repeat-x}
#menu .nav3 a:active span, #menu .nav3#menu_active a span {background:url(../images/menu_nav5_left.gif) top left no-repeat}
#menu .nav3 a:active span span, #menu .nav3#menu_active a span span {background:url(../images/menu_nav5_right.gif) top right no-repeat}

e no javascript dentro de uma div esta assim:

<nav>
                            <ul id="menu">
                                <li class="active">
                                    <a href="javascript: openIndex();">
                                        <span>
                                            <span>Inicio</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="nav2">
                                    <a href="javascript: openSupport().html;" >
                                        <span>
                                            <span>Suporte</span>
                                        </span>
                                    </a>
                                </li>
                                <li class="nav3">
                                    <a href="javascript: openContact();">
                                        <span>
                                            <span>Contato</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </nav>

Como fazer o active funcionar e quando eu clicar no botao alterar a cor?
Obrigado.

2 Respostas

Topicos relacionados