Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

WSP8521

problema com o hover no IE7

Recommended Posts

olá pessoal. Estou com um problema no elemento hover.

eu fiz um menu e coloquei um estilo diferente para quando colocar o mauss..

o codigo é esse

 

codigo em html

 

<ul id="menu">
<li><a href="#">Home</a></li>
<li class="submenu"><a href="#">Nossa Historia</a>
<ul>
	<li id="aiceb"><a href="#">Historia da AICEB</a></li>
	<li><a href="#">historia da igreja</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Estudos Biblicos</a>
<ul id="estudo">
	<li class="submenu"><a href="#">Angeologia</a>
		<ul>
			<li><a href="#">Anjos</a></li>	
			<li><a href="#">Demonios</a></li>
		</ul>
	</li>

	<li class="submenu"><a href="#">Pneumatologia</a>
		<ul>
			<li class="submenu" ><a href="#">Espirito Santo</a>
				<ul >
					<li><a href="#">Na vida de Jesus</a></li>	
					<li><a href="#">Na igreja</a></li>
				</ul>
			</li>
			<li><a href="#">Dons Espirituais</a></li>
		</ul>
	</li>
	<li class="submenu"><a href="#">Cristologia</a>
		<ul>
			<li><a href="#">vida de Jesus</a></li>
			<li><a href="#">Professias sobre Jesus</a></li>
			<li class="submenu"><a href="#">Oficios de Jesus</a>
				<ul>
					<li><a href="#">Profeta</a></li>
					<li><a href="#">Sacerdote</a></li>
					<li><a href="#">Rei</a></li>
				</ul>
			</li>
		</ul>
		</li>
	<li class="submenu"><a href="#">Apologetica</a>
		<ul id="apo">
			<li class="submenu"><a href="#">Igreja Catolica</a>
				<ul>
					<li class="submenu"><a href="#">Mariologia</a>
						<ul>
							<li><a href="#">Maria</a></li>

						</ul>
					</li>
					<li><a href="#">Papa</a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#">IASD</a>
				<ul id="iasd">
					<li><a href="#">Questao do Sabado</a></li>
					<li><a href="#">LEI</a></li>
					<li class="submenu"><a href="#">Ellen Whaite</a>
					<ul>
					<li class="submenu"><a href="#">Livros</a>
					<ul>
					<li><a href="#">o dejados detodas naçoes</a></li>
					<li><a href="#">O grande conflito</a></li>
					</ul>
					</li>
					</ul>
				</li>			
				</ul>
			</li>
			<li class="submenu"><li><a href="#">Espiritismo</a>
				<ul>
					<li><a href="#">Cadersista</a></li>
					<li><a href="#">Ubanda</a></li>
					<li><a href="#">Quinbanda</a></li>
					<li><a href="#">Candoble</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</li>

<li><a href="#">Contato</a></li>			

</ul>

 

codigo em css

/*****************************************************************************************************************
			FORMATAÇÃO GERAL
*****************************************************************************************************************/
ul#menu, ul#menu li ul {
	font:bold 12pt  verdana, arial, helvetica, sans-serif;
	margin:0;
	padding:0;
	list-style:none;
	width:11em;
	border:solid #ccc;
	border-width:0 1px 1px;
	}


ul#menu li a, ul#menu ul li a{
		display:block;
		text-decoration:none;
		color:#161616;
		padding:0.25em 0.5em 0.25em 0.75em;
		border:outset 2px #99ccff;
		}

#menu li a:hover{
	color:#ff0000;
	background: #ffff99;	
	border: inset 5px #ccc;
	}

#menu li a:over{
	color:#ff0000;
	background: #ffff99;	
	border: inset 5px #ccc;
	}

ul#menu li.submenu {
	background:url(seta.jpg) no-repeat right;
	}
/*************************************CONFIGURAÇÃO DOS MENUS*****************************************/
/*\*/
* html ul li {float: left; height: 1%;}
* html ul li a {height: 1%;}
/* */


/*****************************************************************************************************************
				MENU PRINCIPAL
*****************************************************************************************************************/
#menu li{position:relative} /* cria contexto de posicionamento para o submenu*/

#menu li ul{
position:absolute;
display:none;  /*esconde os submenus*/
left:11em;   /*exibe os submenus a esquerda*/
top:0;
}

#menu li:hover ul{display:block} /*exibe todos os submenus ao passar o mouse*/
#menu li:hover ul ul{display:none} /*evita que todos os submenus apareçam*/
#menu ul li:hover ul{display:block;} /*exibe os submenus ao passar o mouse*/
/*****************************************************************************************************************
			CONFIGURAÇÃO DOS SUBMENUS
*****************************************************************************************************************/

#estudo li:hover ul ul{display:none} /*evita que todos os submenus apareçam*/
#estudo ul li:hover ul{display:block;} /*exibe os submenus ao passar o mouse*/

#apo li:hover ul ul{display:none} /*evita que todos os submenus apareçam*/
#apo ul li:hover ul{display:block;} /*exibe os submenus ao passar o mouse*/

#iasd li:hover ul ul{display:none} /*evita que todos os submenus apareçam*/
#iasd ul li:hover ul{display:block;} /*exibe os submenus ao passar o mouse*/

 

pos bem, a estilizaçao hover funciona no FF, mas nao funciona no IE7, os problmas são:

fica tremendo;

o IE7 so reconhce com link quando colocamos bem em cima do texto;

 

gostaria de saber como faço para resolver esse problema

 

fico grato

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.