Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Carregando comentários...