Ir para conteúdo

POWERED BY:

Arquivado

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

Deuz

Menu drop down

Por , em Javascript

Recommended Posts

Deuz    0

Deuz
Postado

Entrei no site do maujor e vi como se cria um menu drop down que funciona tanto no IE como nos outros browsers.

 

Ele funciona beleza, só que eu preciso mais de um menu drop down por página, no opera e firefox o código que eu usei funcionou, apresentou os dois menus certinho, mas no IE aparece o menu e submenu apenas no primeiro caso, no segundo não acontece nada, não consigo entender o porque, pois, o código é o mesmo.

 

Não sei se é problema no javascript porque no css creio estar tudo correto.

 

Agradeço desde já o auxílio!

 

<html><head><title>Menu Drop-Down</title><script language="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>.ul1 {	margin: 0;	padding: 0;	list-style: none;	width: 60px;}.liul1 {	position: absolute;	left: 59px;	top: 0;	display: none;}ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;}ul li {	position: relative;}li ul {	position: absolute;	left: 149px;	top: 0;	display: none;}ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;}/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; }* html ul li a { height: 1%; }/* End */ul {	margin: 0;	padding: 0;	list-style: none;	width: 150px;	border-bottom: 1px solid #ccc;}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 */</style></head><body><div align="center">  <ul id="nav" class="ul1"> 	<li><a href="#">Opções</a>	  <ul id="nav" class="liul1"> 		<li><a href="#">Web Design</a></li> 		<li><a href="#">Internet Marketing</a></li> 		<li><a href="#">Hosting</a>		  <ul id="nav">			<li><a href="#">Dedicated</a></li> 			<li><a href="#">Virtual</a></li> 			<li><a href="#">Shared</a></li>			<li><a href="#">Managed</a></li>		  </ul>		</li> 		<li><a href="#">Domain Names</a></li> 		<li><a href="#">Broadband</a></li> 	  </ul> 	</li>   </ul></div><br><br><div>  <ul id="nav" class="ul1"> 	<li><a href="#">Opções</a>	  <ul id="nav" class="liul1"> 		<li><a href="#">Web Design</a></li> 		<li><a href="#">Internet Marketing</a></li> 		<li><a href="#">Hosting</a>		  <ul id="nav">			<li><a href="#">Dedicated</a></li> 			<li><a href="#">Virtual</a></li> 			<li><a href="#">Shared</a></li>			<li><a href="#">Managed</a></li>		  </ul>		</li> 		<li><a href="#">Domain Names</a></li> 		<li><a href="#">Broadband</a></li> 	  </ul> 	</li>   </ul></div></body></html>

Compartilhar este post

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

Informação importante

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

  Aceito