Problema com hover no Chrome

[B&D Informatica 0]

Ola amigos do forum,

 

Estou com um problema no hover do submenu do botão "A Anexo" no Chrome nao esta aparecendo o efeito ja no Firefox e IE esta funcionando perfeitamente.

 

se alguem puder me ajudar.

 

Valeu pessoal.

[Kraken 0]

Olá,

 

Torna-se um pouco complicado perceber o seu problema sem apresentar o excerto de código..

 

Cumps

[B&D Informatica 0]

Codigo abaixo

 

CSS

ul#menu>li:hover ul.sub-menu-n1,
ul.sub-menu-n1>li:hover { display: block; }

ul.sub-menu-n1 {display: none; width: 140px; list-style: none;}
ul.sub-menu-n1 li a {display: block; height:22px; background-image:url(../img/bg-submenu.png); background-position:left top; background-repeat:repeat-x; border-bottom:1px #696768 solid; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#98989a; font-size:14px; padding:0 9px; text-decoration:none;}
ul.sub-menu-n1 li a:hover {display: block; background-image:url(../img/bg-submenu-hover.png); background-position:left top; background-repeat:repeat-x; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; padding:0 9px;}

HTML

<div id="menu-top">
                      
            <ul id="menu" class="menu-bt">
            
            <li id="m-home" ><a href="#" class="selected"></a></li>
            <li id="m-anexo"><a href="javascript:;" ></a>
				<ul class="sub-menu-n1">
					<li class="sub-menu-n1"><a href="#" >Quem Somos</a></li>
                    <li><a href="#">Missão e Valores</a></li>
					<li><a href="#">Matéria-Prima</a></li>
					<li><a href="#">Processos</a></li>
					<li><a href="#">Equipe</a></li>
					<li><a href="#">Representantes</a></li>
					<li><a href="#">Clientes</a></li>
					<li><a href="#">Wallpapers</a></li>				   
                </ul>         
            </li>
           <li id="m-portfolio"><a href="#"></a></li>
           <li id="m-multimedia"><a href="#"></a></li>
           <li id="m-contato"><a href="#"></a></li>
           </ul>
           
           </div>

[Evandro Oliveira 331]

Primeiro de tudo, ou elimine as tags vazias ou preencha-as

 

<div id="menu-top">
                      
            <ul id="menu" class="menu-bt">
            
            <li id="m-home" ><a href="#" class="selected">Home</a></li>
            <li id="m-anexo"><a href="javascript:;" >Anexo</a>
                                <ul class="sub-menu-n1">
                                        <li class="sub-menu-n1"><a href="#" >Quem Somos</a></li>
                    <li><a href="#">Missão e Valores</a></li>
                                        <li><a href="#">Matéria-Prima</a></li>
                                        <li><a href="#">Processos</a></li>
                                        <li><a href="#">Equipe</a></li>
                                        <li><a href="#">Representantes</a></li>
                                        <li><a href="#">Clientes</a></li>
                                        <li><a href="#">Wallpapers</a></li>                                
                </ul>         
            </li>
           <li id="m-portfolio"><a href="#">Portifolio</a></li>
           <li id="m-multimedia"><a href="#">Multimídia</a></li>
           <li id="m-contato"><a href="#">Contato</a></li>
           </ul>
           
           </div>

Este <div> é inútil se o único objetivo dele for envolver a lista. <ul> também é um elemento de bloco, tal qual a <div>

 

<ul id="menu-top" class="menu-bt">
            
            <li id="m-home" ><a href="#" class="selected">Home</a></li>
            <li id="m-anexo"><a href="javascript:;" >Anexo</a>
                                <ul class="sub-menu-n1">
                                        <li class="sub-menu-n1"><a href="#" >Quem Somos</a></li>
                    <li><a href="#">Missão e Valores</a></li>
                                        <li><a href="#">Matéria-Prima</a></li>
                                        <li><a href="#">Processos</a></li>
                                        <li><a href="#">Equipe</a></li>
                                        <li><a href="#">Representantes</a></li>
                                        <li><a href="#">Clientes</a></li>
                                        <li><a href="#">Wallpapers</a></li>                                
                </ul>         
            </li>
           <li id="m-portfolio"><a href="#">Portifolio</a></li>
           <li id="m-multimedia"><a href="#">Multimídia</a></li>
           <li id="m-contato"><a href="#">Contato</a></li>
           </ul>

Não há nenhuma referência à li.sub-menu-n1, removeremos esta classe e ajeitaremos a indentação

 

<ul id="menu-top" class="menu-bt">
	<li id="m-home"><a href="#" class="selected">Home</a></li>
	<li id="m-anexo">
		<a href="javascript:;">Anexo</a>
		<ul class="sub-menu-n1">
			<li><a href="#" >Quem Somos</a></li>
			<li><a href="#">Missão e Valores</a></li>
			<li><a href="#">Matéria-Prima</a></li>
			<li><a href="#">Processos</a></li>
			<li><a href="#">Equipe</a></li>
			<li><a href="#">Representantes</a></li>
			<li><a href="#">Clientes</a></li>
			<li><a href="#">Wallpapers</a></li>
		</ul>
	</li>
	<li id="m-portfolio"><a href="#">Portifolio</a></li>
	<li id="m-multimedia"><a href="#">Multimídia</a></li>
	<li id="m-contato"><a href="#">Contato</a></li>
</ul>

Vamos ao CSS. Especificidade e Cascata.

 

Primeiro vamos analisar esta sintaxe:

ul#menu>li:hover ul.sub-menu-n1, ul.sub-menu-n1>li:hover

O navegador vai primeiro procurar por todas as <ul>, então filtrará a que tenha o ID = "menu".

Depois, dentre os filhos desta ul#menu, procurará apenas as <li> descendentes diretas.

Dentro destas <li>, as que estiverem em estado :hover receberão a modificação.

Ou procurar no documento por todas as <ul> e a partir daí filtrar as que tenham a classe = "sub-menu-n1". Desse filtro, procuraremos dentre os descendentes diretos, todos os elementos <li> que também estejam no estado :hover

 

Que tal simplificar?

#menu li:hover ul

ID's são identificadores únicos. Não precisamos aplicar um filtro de elementos antes de procurar por um ID, podemos localizá-lo diretamente.

Dentro deste elemento com o nome de #menu, procuraremos por seus descendentes <li>, em estado :hover, que tenham descendentes <ul> dentro deles. Sendo <li> um elemento de nível bloco, se o <li> filho está em :hover, obviamente o <li> pai também estará. Portanto, qualquer variação de

li:hover li:hover

é desnecessária.

 

Com base nessa simplificação, simplificaremos todos os outros seletores:

 

#menu-top li:hover { display: block; }
#menu-top ul {display: none; width: 140px; list-style: none;}
#menu-top ul a {display: block; height:22px; background-image:url(../img/bg-submenu.png); background-position:left top; background-repeat:repeat-x; border-bottom:1px #696768 solid; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#98989a; font-size:14px; padding:0 9px; text-decoration:none;}
#menu-top ul a:hover {display: block; background-image:url(../img/bg-submenu-hover.png); background-position:left top; background-repeat:repeat-x; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#ffffff; font-size:14px; padding:0 9px;}

Com base nisso, não estamos mais utilizando as classes, apenas o seletor #menu-top, navegando pelos seus filhos. Isto é possível pois temos pleno controle da marcação HTML, que se reduzirá mais um pouco.

 

<ul id="menu-top">
	<li id="m-home"><a href="#" class="selected">Home</a></li>
	<li id="m-anexo">
		<a href="javascript:;">Anexo</a>
		<ul>
			<li><a href="#" >Quem Somos</a></li>
			<li><a href="#">Missão e Valores</a></li>
			<li><a href="#">Matéria-Prima</a></li>
			<li><a href="#">Processos</a></li>
			<li><a href="#">Equipe</a></li>
			<li><a href="#">Representantes</a></li>
			<li><a href="#">Clientes</a></li>
			<li><a href="#">Wallpapers</a></li>
		</ul>
	</li>
	<li id="m-portfolio"><a href="#">Portifolio</a></li>
	<li id="m-multimedia"><a href="#">Multimídia</a></li>
	<li id="m-contato"><a href="#">Contato</a></li>
</ul>

<li>'s já são elementos de nível bloco, o que dispensa a primeira linha. a:hover não difere em nada de a, o que quer dizer que você só precisa declarar as diferenças entre eles, que se resumiria a:

background-image:url(../img/bg-submenu-hover.png);
	color:#ffffff;

Procure utilizar a notação reduzida das propriedades, como no caso background pode ser substituída de

background-image:url(../img/bg-submenu.png);
	background-position:left top;
	background-repeat:repeat-x;

por

background: url(...) left top repeat-x;

Utilize a notação específica apenas quando quiser acessar uma única propriedade em exclusivo, como fizemos com a:hover. Desta forma, manteremos position e repeat inalterados.

 

Por último, organize suas propriedades em ordem alfabética (preferência pessoal). Fica mais fácil pra localizar e alterar e, com um pouco de prática, futuramente você estará fazendo de maneira inconsciente.

 

#menu-top ul { display: none; list-style: none; width: 140px }
#menu-top li:hover ul { display:block; }
#menu-top ul a { background: url(../img/bg-submenu.png) repeat-x top left; border-bottom: 1px #696768 solid; color: #98989a; display: block; font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif; height:22px; padding: 0 9px; text-decoration: none; }
#menu-top ul a:hover { background-image: url(../img/bg-submenu-hover.png); color: #ffffff; }

Funcional, reduzido e cross-browser.