Ir para conteúdo

POWERED BY:

Arquivado

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

Pienkovski

menu dropdown não funciona

Por , em Javascript

Recommended Posts

Pienkovski    0

Pienkovski
Postado

Amigos,

preciso fazer um menu dropdown, achei um tutorial na internet, mas ele só funciona sozinho.

Quando eu o coloco no restante do site ele não funciona.

Será que alguém sabe porque?

Veja o script:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testando o menu drop-down</title>
<style type="text/css">
<!--
body {background-color: #e6e7e8; color: #000000; font-family: Verdana, Geneva, Arial, sans-serif; font-size: 12px;
margin-top: 10px; margin-left: 125px; margin-right: 125px; margin-bottom: 10px;}
ul.menubar{margin: 0px; padding: 0px; background-color: #FFFFFF; /* IE6 Bug */
  font-size: 100%;
}
ul.menubar .submenu{margin: 0px; padding: 0px; position: absolute; left: 120px;
  top: 56px; width: 145px; height: 20 px; list-style: none;
  background-color: transparent; border: 0px; float:left;
}
ul.menubar ul.menu{display: none; position: absolute; margin: 0px;
}
ul.menubar a{padding: 5px; display:block; text-decoration: none; color: #777;
  padding: 5px;
}
ul.menu, ul.menu ul{margin: 0; padding: 0; border-bottom: 1px solid #ccc;
  width: 150px; /* Width of Menu Items */ background-color: #FFFFFF; /* IE6 Bug */
}
ul.menu li{position: relative; list-style: none; border: 0px;
}
ul.menu li a{display: block; background-color: #C9E0E3; text-decoration: none;
  border: 1px solid #ffffff; border-bottom: 0px; color: #000000;
}
ul.menu li sup{font-weight:bold;font-size:10px;color: red;
}
/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%; }
* html ul.menu li a { height: 1%; }
/* End */
ul.menu ul{position: absolute; display: none; left: 149px; /* Set 1px less than  menu width */top: 0px;
}
ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */
ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; }
ul.menu li a:hover { color: #303A9C; }
-->
</style>

<script type="text/javascript">
function horizontal() {

   var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");

   for (var i=0; i< navItems.length; i++) {
      if(navItems[i].className == "submenu")
      {
         if(navItems[i].getElementsByTagName('ul')[0] != null)
         {
            navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}
         }
      }
   }

}

</script>

</head>
<body onload="horizontal();">

<ul id="menu_dropdown" class="menubar">
   <li class="submenu"><a href="#"><img src="homesite_06.gif" width="145" height="20" border="0"></a>
      <ul class="menu">
        <li><font size="2"><a href="#">Edição 2005</a></font></li>
        <li><font size="2"><a href="#">Edição 2006</a></font></li>
        <li><font size="2"><a href="#">Edição 2007</a></font></li>
        <li><font size="2"><a href="#">Edição 2008</a></font></li>
      </ul>
   </li>
</ul>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Não vi nada de anormal no código. O que está acontecendo? Quando acontece? Existem mais códigos JS na página? Você tem algum exemplo on-line para nos mostrar, facilitando a nossa compreensão de onde está o erro?

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