[Resolvido] Hover afetar outra classe

[gbrlsepulveda 0]

Olá, bom dia, estou tendo um problema com um menu drop down, feito com jquery e CSS, no caso não seria um problema de fato, e sim um aperfeiçoamento,

no menu ele tem uma estrutura de menus principais e quando passo o mouse em cima ele rola para baixo com submenus, sendo que enquanto estou com o hover no menu principal aparece uma imagem de background no menu principal que no caso seria outra classe dos sub menus, e quando passo o mouse sobre o submenu esse background do menu principal some, e precisaria que ele continuasse, segue abaixo a estrutura do css, com a estrutura do menu, gostaria de saber se alguém teria uma sugestão para o caso, seria +o- o hover da sub menu afetasse o back do menu principal, mas n sei como implementar isso.

 

HTML

         <ul class="menu_topo">

           <li>
             <a href="#" class="about">About</a>
              </li>


               <li>
                   <a href="#" class="informacoes">Informações</a>
                   <ul class="submenubg_info"> 
                           <li><a href="#">Editorial</a></li>
                            <li><a href="#">Quem Somos</a></li>
                             <li><a href="#">Nossa Revista</a></li>
                              <li><a href="#">Imprensa</a></li>
                              <li><a href="#">Publicidade</a></li>
                             <li><a href="#">Trabalhe Conosco</a></li>
                            <li><a href="#">Créditos</a></li>
                           <li><a href="#">Contato</a></li>                   
                 </ul> 

          </li>



               <li> 
                   <a href="#" class="servicos">Serviços</a>
                        <ul class="submenubg_serv"> 

                           <li><a href="#">Classificados</a></li>
                            <li><a href="#">Newsletters</a></li>
                             <li><a href="#">Promoções</a></li>
                              <li><a href="#">Opniões</a></li>
                              <li><a href="#">Informações</a></li>
                             <li><a href="#">Mapas</a></li>
                             <li><a href="#">Cameras Online</a></li>
                            <li><a href="#">Busca</a></li>
                           <li><a href="#">Telefones Úteis</a></li>

                 </ul>                       
          </li>


              <li>
                   <a href="#" name="canais" class="canais">Canais</a>
                        <ul class="submenubg_canais"> 

                           <li><a href="#">Bairro</a></li>
                            <li><a href="#">Notícias</a></li>
                             <li><a href="#">Noite na Barra</a></li>
                              <li><a href="#">Diversão e Cultura</a></li>
                               <li><a href="#">Guia Bairro</a></li>
                                <li><a href="#">Artigos</a></li>
                                <li><a href="#">Entrevistas</a></li>
                               <li><a href="#">Colunistas</a></li>
                              <li><a href="#">Fotos e Eventos</a></li>
                             <li><a href="#">Copa do Mundo</a></li>
                            <li><a href="#">Olímpiadas</a></li>
                           <li><a href="#">Fondue</a></li>

                       </ul>               
                  </li>

        </ul> 

 

CSS

 

@charset "utf-8";
/* CSS Document */
.jqueryslidemenu {
width:100%;
}

.jqueryslidemenu ul {
list-style-type:none;
z-index:1;
display:block;
margin:0;
padding:0;
}

/*Top level list items*/
.jqueryslidemenu ul li {
position:relative;
float:right;
display:inline;
z-index:2;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a {
display:block;
color:#09C;
text-decoration:none;
z-index:3;
padding:4px 10px 15px;
}

* html .jqueryslidemenu ul li a {
display:inline-block;
}

.jqueryslidemenu ul li a:link,.jqueryslidemenu ul li a:visited {
color:#FFF;
}

.jqueryslidemenu ul li a.canais:hover {
color:#FFF;
background-image:url(images/menu/teste_menu_img.png);
background-repeat:no-repeat;
background-position:5px 0;
}

.jqueryslidemenu ul li a.servicos:hover {
color:#FFF;
background-image:url(images/menu/teste_menu_maior.png);
background-repeat:no-repeat;
background-position:3px 0;
}

.jqueryslidemenu ul li a.informacoes:hover {
color:#FFF;
background-image:url(images/menu/teste_menu_info.png);
background-repeat:no-repeat;
background-position:1px 0;
}

.jqueryslidemenu ul li a.about:hover {
color:#FFF;
background-image:url(images/menu/teste_menu_about.png);
background-repeat:no-repeat;
background-position:5px 0;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul {
position:absolute;
left:0;
display:block;
visibility:hidden;
z-index:1;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {
display:list-item;
background-color:#500;
float:none;
z-index:1;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul {
top:0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
width:180px;
font-size:14px;
line-height:22px;
border-top-width:0;
border-bottom:1px solid #500;
text-align:left;
background-color:#600;
background-image:none;
margin:0;
padding:0 0 0 5px;
}

.jqueryslidemenu ul li ul.submenubg_canais li a:hover,.jqueryslidemenu ul li ul.submenubg_info li a:hover,.jqueryslidemenu ul li ul.submenubg_serv li a:hover {
background-color:#500;
background-image:none;
}

.submenubg_info,.submenubg_canais,.submenubg_serv {
background-image:none;
background-color:#600;
color:#500;
}

 

Grato.

[_Leandro_ 0]

Esta tua ID "jqueryslidemenu" onde está aplicada?

 

podes usar ela diretamente na primeira UL....

 

Faça uns testes...

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[gbrlsepulveda 0]

Esta tua ID "jqueryslidemenu" onde está aplicada?

 

podes usar ela diretamente na primeira UL....

 

Faça uns testes...

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

 

no caso o menu ta sendo carregado em php e esta ID está assim

 

        <div id="myslidemenu" class="jqueryslidemenu">
           <?php include("menu.php");?>
        </div> 

 

e no caso, eu precisaria que, no [.jqueryslidemenu ul li ul.submenubg_canais li a:hover ] mudasse o background de [.jqueryslidemenu ul li a.canais].

 

É meio complicado, tentei procurar algo assim na web, mas ta dificil, sugere algo ?

[_Leandro_ 0]

Cara, não sei se vai funcionar mas testa assim:

 

.jqueryslidemenu ul li:hover

.jqueryslidemenu ul li ul.submenubg_canais li:hover

 

Colocando as mesmas propriedades nas duas regras css.

 

Tenho um exemplo mais simplificado no meu blog:

http://www.maisumpixel.com.br/categoria/css/um-menu-vertical-com-dropdown-apenas-com-html-e-css'>http://www.maisumpixel.com.br/categoria/css/um-menu-vertical-com-dropdown-apenas-com-html-e-css

 

Testa ai pra ver...

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[gbrlsepulveda 0]

Cara, não sei se vai funcionar mas testa assim:

 

.jqueryslidemenu ul li:hover

.jqueryslidemenu ul li ul.submenubg_canais li:hover

 

Colocando as mesmas propriedades nas duas regras css.

 

Tenho um exemplo mais simplificado no meu blog:

http://www.maisumpixel.com.br/categoria/css/um-menu-vertical-com-dropdown-apenas-com-html-e-css'>http://www.maisumpixel.com.br/categoria/css/um-menu-vertical-com-dropdown-apenas-com-html-e-css

 

Testa ai pra ver...

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

 

 

E aew cara, deu certo, só preciso ajustar o css, pois a imagem está aparecendo 2 vzs, mas deu certo,

obrigado pela ajuda.

 

TOPICO RESOLVIDO !