Codigo e submenu

Denis Martos · Março 6, 2008

Abaixo está o codigo, mais não consigo mudar as cores do menu com ta escrito fala que da bug com o IE, tem algum geito pra arrumar o codigo, ou outro geito de mudar as cores?

<!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 { font: normal 90% verdana; }  
ul.menubar{
  margin: 0px;                                   
padding: 0px;                                
  background-color: #000000; /* IE6 Bug */       
font-size: 100%;                              
ul.menubar .submenu{
  margin: 0px;
  padding: 5px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #CCC; 
  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: 0px;
}

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;
  text-decoration: none;
  border: 1px solid #ccc;
  border-bottom: 0px;
  color: #777;
  padding: 5px 10px 5px 5px;
}

ul.menu li sup{
  font-weight:bold;
  font-size:7px;
  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: #E2144A; }

</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="#">Home</a></li>
   <li class="submenu"><a href="#">Tintas</a>
      <ul class="menu">
        <li><a href="#">Tintas nauticas</a></li>
        <li><a href="#">Tintas para casas</a></li>
        <li><a href="#">Tintas automobilisticas</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Abrasivos</a>
      <ul class="menu">
        <li><a href="index5.html">Lixas</a></li>
        <li><a href="#">Fitas Adesivas</a></li>
        <li><a href="#">Discos de Corte</a></li>
        <li><a href="#">Pistolas</a></li>
    <li><a href="#">Outros</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Fiberglass</a>
      <ul class="menu">
        <li><a href="#">Fibra de Vidro</a></li>
        <li><a href="#">Resinas</a></li>
        <li><a href="#">Gel Coat</sup></a></li>
      </ul>
   </li>
      <li class="submenu"><a href="#">Contato</a>
      <ul class="menu">
        <li><a href="#">Colabore Conosco</a></li>
        <li><a href="#">Enquetes finalizadas</a></li>
        <li><a href="#">Fale Conosco</a></li>
    <li><a href="#">Trabalhe Conosco</a></li>
      </ul>
   </li>
   <li class="submenu"><a href="#">Contato</a></li>
</ul>
    
</body>
</html>

Gigabyte · Março 7, 2008

Acho que é isto....

body { font: normal 90% verdana; }
ul.menubar{
margin: 0px;
padding: 0px;
background-color: #ff0000; /* IE6 Bug */
font-size: 100%;
}  //acrescentei apenas este colchete!
ul.menubar .submenu{
margin: 0px;
padding: 5px;
list-style: none;
background-color: #0000ff;
border: 1px solid #CCC;
float:left;
}

Agora, acho bom você dar uma olhada geral neste código porque tá MAXbugado no FF e no Opera!

Denis Martos · Março 7, 2008

Eu não manjo muito de Java cara ai eu procurei esse codigo na net, eu estou precisando de um submenu se alguém tiver algum ai e puder repassar eu agradeço...

Quando ao codigo que você modificou ele muda todas as cores mais quando você da um a:hover nele ele fica branco !!!

Mais brigado pela ajuda !!!

Entrar

Codigo e submenu

Pergunta

Denis Martos

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Gigabyte

Link para o comentário

Compartilhar em outros sites

Denis Martos

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades