Ir para conteúdo

POWERED BY:

Arquivado

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

Mikept

problemas com menu IE7

Por , em Desenvolvimento frontend

Recommended Posts

Mikept    0

Mikept
Postado

Estou a fazer um site e tenho um menu que no firefox funciona muito bem mas no IE7 não está como eu quero.

De seguida, mostro um pedaço de código:

 

CSS

 

ul{	z-index:1;	margin-left: 15px;	margin-top:215px;	padding: 0;	list-style: none;	width: 150px;	position: absolute;}	/* Fix IE. Hide from IE Mac \*/html ul li { float: left;}html ul li a { height: 1%; }	/* End */ul li{	position:relative;}ul li a{	width: 125px;	height:20px;	display:block;	text-align:left;	padding: 5px 10px;	margin-bottom:2px;	text-decoration: none;	color: #fff;	background: #009900;	border-left: 12px solid #33cc00;	border-right: 5px solid #33cc00;	font-family: Verdana;	font-size: 15px;}ul li a:hover{	color: #cc6600;	background: #33ff33;	height:24px;	font-size:large;	text-align:center;	border-right: 13px solid #17c71c;	border-left: 15px solid #17c71c;	position: relative;}li ul{	position: absolute;	left: 155px;	top: -213px;	display: none;}li:hover ul, li.over ul{	display: block;}

HTML

 

<script>over = function(){	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {		sfEls[i].onmouseover=function()		{			this.className+=" over";		}		sfEls[i].onmouseout=function()		{			this.className=this.className.replace(new RegExp(" over\\b"), "");		}	}}if (window.attachEvent)	window.attachEvent("onload", over);</script><body><ul id="nav">  <li><a href="administradorhome.php">Início</a></li>  <li><label><a>Modalidades</a></label>	  <ul id="nav"> 		<li><a href="administradorhome.php?load=modalidadesinseriradmin">Inserir</a></li> 		<li><a href="administradorhome.php?load=modalidadeslistaradmin">Listar/Remover</a></li> 	</ul>   </li>   </ul></body>

O problema, é que ao passar por cima dum menu, aparece do lado direito desse um submenu. No firefox ta tudo bem mas no IE aparece muito ao lado e nao consigo clicar nele.

Espero que me possam ajudar...

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcelrizzo    0

marcelrizzo
Postado

Bem, eu não fiquei procurando o que está errado, mas eu tenho certeza que você retirou ele do mesmo lugar de um que eu usei uma vez.

 

Copia tudo e cola. Você só vai ter que mudar a estilização. Ele está um pouco comentado.

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Nova pagina 1</title><script type="text/javascript">over = function() {	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {		sfEls[i].onmouseover=function() {			this.className+=" over";		}		sfEls[i].onmouseout=function() {			this.className=this.className.replace(new RegExp(" over\\b"), "");		}	}}if (window.attachEvent) window.attachEvent("onload", over);</script><style type="text/css">/* developed by Nick Rigby */#menu{					/* 	position:absolute;	*left:116px; */	padding-top:85px;	float:left;	}ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px; /* Width of Menu Items */	background-color: rgb(255,216,143);	}ul li {	position: relative;	border-bottom:1px solid #000;	}	li ul {	position: absolute;	left: 149px; /* Set 1px less than menu width */	top: 0;	display: none;	}/* Styles for Menu Items */ul li a {	display: block;	text-decoration: none;	background-color: rgb(255,216,143); /* Laranja */	border-top:1px solid #000;	border-right:1px solid #000;	border-left:10px solid #17c71c;	}/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */ul li a:link, ul li a:visited { color: #000; }ul li a:hover {background-color: #ffe4b5;} /* Hover Styles */ 		li ul li a { border-left:1px solid #000; } /* Sub Menu Styles */	li:hover ul, li.over ul { display: block; } /* The magic */.click{	background-color: #ffe4b5;} /* salmão - menu ativo */li:hover ul ul, li.over ul ul { 	display:none; 	}li:hover ul, li li:hover ul, li.over ul, li li.over ul { 	display: block; /* Aqui a magica */	font-size:13px;	/* Diminui o submenus */	}</style></head><body><div id="menu">				<ul id="nav"> 								  <li><a href="eng_home.htm">Link1</a></li> 				  				  <li><a href="eng_history.htm">Link2</a></li> 				  				  <li><a class="click" href="#">Link3</a> 				    <ul> 				      <li><a href="#">Link1</a> 				      		<ul>					            <li><a href="link">Link1</a></li>								<li><a href="link">Link2</a></li>				            </ul>				      </li>					  <li><a href="#">Link2</a></li> 				      <li><a href="#">Link3</a></li> 				    </ul> 				  </li> 								</ul>			</div> <!-- FIM DO MENU XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX --></body></html>

OBS: quando você usar algo criado por alguém, não retire os créditos, mesmo que tenha mudado um pouco o código.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RTaveira    0

RTaveira
Postado
Mikept, antes de criar um tópico, faça uma pesquisa antes pelo fórum para ver se já foi criada uma dúvida tipo a sua.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rcdesign    1

rcdesign
Postado

Estou com o mesmo problema .. no mesmo código inclusive.. porém esse problema só ocorre quando se usa o submenu em inline - ´que é como eu preciso...

 

eu tentei adaptar o código postado neste link: http://forum.imasters.com.br/index.php?showtopic=216008 mas ocorreu o mesmo erro...

 

parece-me então que é realmente um bug do IE .. se alguém tiver alguma solução por favor avise....

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito