Ir para conteúdo
Fórum Script Brasil
  • 0

[Dúvida/Problema] Hover permanente em UL LI


fernands

Pergunta

Fala galera... estou com um problema persistente em um site que estou desenvolvendo aqui.

Desenvolvi um menu de hierarquia UL LI UL LI em imagens, com um simples efeito de dropdown na LI principal, chamando a UL/LI secundária, e gostaria de criar um "hover permanente" na LI quando a UL/LI fosse acionada.

Vou postar o HTML/CSS pro pessoal dar uma avalidada.

<div id="top"><!-- INICIO TOP -->
         <div class="center">
           <h1><a href="index.html"></a></h1>
          <ul>
                 <li class="home"><a href="index.html"><span><strong>COLDWELL</strong></span></a></li>
         <li class="sobre"><a href="sobre.html"><span><strong>Portfolio</strong></span></a></li>
                 <li class="solucoes"><a href="solucoes.html"><span><strong>Portfolio</strong></span></a>
                    <ul>
                        <li class="automacao"><a href="solucoes_automacoes.html"><span><strong>Automação Mobile</a></strong></span></li>
                        <li class="marketing"><a href="solucoes_mobile_marketing.html"><span><strong>Mobile Marketing</a></strong></span></li>
                        <li class="commerce"><a href="solucoes_mobile_commerce.html"><span><strong>Mobile Commerce</a></strong></span></li>
                        <li class="site"><a href="solucoes_mobile_site.html"><span><strong>Mobile Site</a></strong><span></li>
                        <li class="banking"><a href="solucoes_mobile_banking.html"><span><strong>Mobile Banking</a></strong></span></li>
                    </ul>
                  </li>
                     <li class="parcerias"><a href="parceiros.html"><span><strong>Parcerias</strong></span></a></li>
                  <li class="clientes"><a href="http://www.coldwell.com.br/clientes.html" target="_blank"><span><strong>Clientes</strong></span></a></li>
                  <li class="contato"><a href="http://www.coldwell.com.br/contato_coldwell.html" target="_blank"><span><strong>Contato</strong></span></a></li>
             </ul>
        </div>
    </div><!-- FIM TOP -->
E o CSS:
div#top ul {
    width:625px;
    position:relative;
    float:left;
    _display:inline;
    margin:-30px 0 0 288px;
}
div#top ul li {
    float:left;
    _display:inline;
    position:relative;
    padding:0 0 0 20px;
}
div#top ul li a {
    display:block;
    height:27px;
}
div#top ul li a span {
    display:block;
    height:27px;
    float:left;
}
div#top ul li a.ativo span {
    background-position:right top;
}
div#top ul li a span strong {
    visibility:hidden;
}
div#top ul li.home a span {width:62px;background-image:url(../img/menu_header/home_default.png);}
div#top ul li.home a:hover span {width:62px;background-image:url(../img/menu_header/home_hover.gif);}
div#top ul li.sobre a span {width:61px;background-image:url(../img/menu_header/sobre_default.png);}
div#top ul li.sobre a:hover span {width:61px;background-image:url(../img/menu_header/sobre_hover.gif);}
div#top ul li.solucoes a span {width:144px;background-image:url(../img/menu_header/solucoes_default.png);}
div#top ul li.solucoes a:hover span{width:144px;background-image:url(../img/menu_header/dropdown/dropdown_standard.png);}
div#top ul li.parcerias a span {width:84px;background-image:url(../img/menu_header/parceiros_default.png);}
div#top ul li.parcerias a:hover span {width:84px;background-image:url(../img/menu_header/parceiros_hover.gif);}
div#top ul li.clientes a span {width:75px;background-image:url(../img/menu_header/clientes_default.png);}
div#top ul li.clientes a:hover span {width:75px;background-image:url(../img/menu_header/clientes_hover.gif);}
div#top ul li.contato a span {width:73px;background-image:url(../img/menu_header/contato_default.png);}
div#top ul li.contato a:hover span {width:73px;background-image:url(../img/menu_header/contato_hover.gif);}

div#top ul li ul {
    float:left;
    display:none;
    position:absolute;
    width:144px;
    margin:0px 0 0 -60px;
    height:27px;
}
div#top ul li:hover ul {
    display:block;
}
div#top ul li ul li {
    width:144px;
    height:27px;
    margin:0;
}
div#top ul li ul li a {
    display:block;
    height:27px;
}
div#top ul li ul li a span {
    display:block;
    height:27px;
    float:left;
}
div#top ul li ul li a span strong {
    visibility:hidden;
}
div#top ul li ul li.automacao a span {width:144px;background-image:url(../img/menu_header/dropdown/automacao_standard.png);}
div#top ul li ul li.automacao a:hover span {width:144px;background-image:url(../img/menu_header/dropdown/automacao_hover.png);}
div#top ul li ul li.marketing a span {width:144px;background-image:url(../img/menu_header/dropdown/marketing_standard.png);}
div#top ul li ul li.marketing a:hover span {width:144px;background-image:url(../img/menu_header/dropdown/marketing_hover.png);}
div#top ul li ul li.commerce a span {width:144px;background-image:url(../img/menu_header/dropdown/commerce_standard.png);}
div#top ul li ul li.commerce a:hover span {width:144px;background-image:url(../img/menu_header/dropdown/commerce_hover.png);}
div#top ul li ul li.site a span {width:144px;background-image:url(../img/menu_header/dropdown/site_standard.png);}
div#top ul li ul li.site a:hover span {width:144px;background-image:url(../img/menu_header/dropdown/site_hover.png);}
div#top ul li ul li.banking a span {width:144px;background-image:url(../img/menu_header/dropdown/banking_standard.png);}
div#top ul li ul li.banking a:hover span {width:144px;background-image:url(../img/menu_header/dropdown/banking_hover.png);}

Marquei a LI que gostaria manter o Hover permanente, e as sub-LI que ativarão esse Hover Permanente.

Editado por _Vinny_
Adicioner tag [code]
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...