Menu dropdow

mateusguitar1 · Agosto 25, 2011

Eae Galera! beleza?

Bom tenho o Seguinte Problema <_<

fiz um Menu Drop_Down com html e css... no Firefox, Chrome, Safari fica uma Beleza

porem no (INFELIZ) do IE não funciona...

se puderem entrar nesta página vão poder ver que no IE não funciona ( http://www.arteria.com.br/advogados )

CSS

<style>
@charset "utf-8";
/* CSS Document */
body{
margin:0 auto;
}

#geral{
width:963px;
height:auto;
}

#om{
width:1277px;
height:44px;
position:relative;
background:url('../imagens/menu.png');
margin-top:40px;
margin-left:80px;
color:#FFFFFF;

}
#sidebarleft{
float:left;
width:214px;
height:484px;
margin-left:265px;
background-color:#FFFFFF;

}
#conteudo{
width:749px;
height:auto;
margin-left:477px;	
background-color:#FFFFFF;
}

.saiba{
color:#FFFFFF;
background:#8f8d8a;
border-top:2px solid #8f8d8a;
border-right:4px solid #8f8d8a;
border-bottom:2px solid #8f8d8a;
border-left:4px solid #8f8d8a;
}

#rodape{
bottom:0;
width:749px;
height:20px;
margin-left:477px;	
background-color:#FFFFFF;
}
.semespaco{
margin-top:-8px;
}

.subiu{
margin-top:-3px;
}
#myriad{
font-family: "Myriad Pro", Verdana, sans-serif;
}

ul.menubar{
 margin: 0px 0px 0px 210px;
 padding: 0 0 0 0; 
 font-size: 100%;
}

ul.menubar .submenu{
 margin: 0px;
 padding: 0px 0px 0 0;
 list-style: none;
 float:left;

}

ul.menubar ul.menu{
 display: none;
 position: absolute;
 margin: 0px;
}

ul.menubar a{
 display:block;
 text-decoration: none;
 color: #FFFFFF;
 padding: 12px;
}
il.menubar:hover{
color:#FFFFFF;
}

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: #777673;
 padding: 5px 10px 5px 5px;
 background-color:#FFFFFF;
}
ul.menu li a:hover{
 display: block;
 text-decoration: none;
 border: 1px solid #ccc;
 border-bottom: 0px;
 color: #FFFFFF;
 padding: 5px 10px 5px 5px;
 background-color:#777673;
}

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:hover { color: #8f8d8a; }
a:hover{
background-color:#777673;
}
a{
text-decoration:none;
}
a:visited{
text-decoration:none;
color:#FFFFFF;
}
#afasta{
margin-top:10px;
margin-left:10px;
}
#afastaa{
margin-top:12px;
margin-left:5px;
cursor:pointer;
}
a.seta{
margin-top:-12px;
padding:0;
background:none;
color:transparent;
text-decoration:none;
}
.mapa{
margin-top:30px;
margin-left:10px;
}
.titulo{
color:#415E84;
margin-left:30px;
font-size:18px;
}
.texto{
font-size:13px;
color:#444444;
margin-left:30px;
}
.input{
background-color:#e1e1e1;
color:#000000;
margin-top:-2px;
border:none;
}
</style>

HTML

<!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=utf-8" />
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<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 = "#777673";}
           navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "";}
        }
     }
  }

}

</script>
<title>advt</title>
</head>

<body onload="horizontal();" style="font-family:'Myriad Pro', verdana, sans-serif">
<table background="imagens/fundo.jpg" width="1500" height="942" align="center">
<td>
<div id="geral">
<div id="om" align="center">
<table Id="myriad">
<!--[if IE]>
<style>
ul.menubar{
widht:200px;
 margin:0;
 padding:0; 
 float:left;
 position:relative;
}
ul.menubar .submenu{
 margin: 0px;
 padding: 0px 0px 0 0;
 list-style: none;
 float:left;
}
#om{
width:1277px;
height:44px;
position:relative;
background:url('imagens/menu.png');
margin-top:40px;
margin-left:80px;
color:#FFFFFF;

}
</style>
<![endif]-->
<ul id="menu_dropdown" class="menubar">
  <li class="submenu"><a href="#">HOME</a></li>
  <li class="submenu"><a href="#">ATUAÇÃO</a>
     <ul class="menu">
       <li><a href="#">NADA</a></li>
       <li><a href="#">NADA</a></li>
       <li><a href="#">NADA</a></li>
       <li><a href="#">NADA</a></li>
	<li><a href="#">NADA</a></li>
     </ul>
  </li>
  <li class="submenu"><a href="#">ADVOGADOS</a>
     <ul class="menu">
       <li><a href="#">NADA</a></li>
       <li><a href="#">NADA</a></li>
       <li><a href="#">NADA</a></li>
       <li><a href="#">NADA</a></li>
	<li><a href="#">NADA</a></li>
     </ul>
  </li>
  <li class="submenu"><a href="#">ESCRITÓRIO</a>
     <ul class="menu">
       <li><a href="#">NADA</a></li>
       <li><a href="#">NADA</a></li>
       <li><a href="#">NADA</a></li>
     </ul>
  </li>
     <li class="submenu" id="cor"><a href="#">RESP.SOCIAL</a>
  </li>
  <li class="submenu"><a href="#">LINKS</a></li>
  <li class="submenu"><a href="#">CONTATO</a></li>
  <li class="submenu" id="afasta"> <input value="BUSCA" style="color:#CCCCCC;padding-left:10px;" size="20" type="text" onblur="if(this.value == '') {this.value = 'BUSCA';}" onfocus="if(this.value == 'BUSCA') {this.value = '';}" /></li>
  <li class="submenu" id="afastaa"><a href="#" class="seta"><img src="imagens/seta.jpg"></a></li>
</ul>
</table>
</div>
<div id="sidebarleft">
<img src="imagens/mapa.jpg" class="mapa"><br>

<font class="titulo">São Paulo</font><br>
<font class="texto">Alameda Joaquim Eugênio de<br></font>
<font class="texto">Lima, 696 - 5° andar.<br></font>
<font class="texto">CEP: 01403-001<br></font>
<font class="texto">Telefone/FAX: (11)3141 <span style="dislpay:none;">- </span>1405</font>
<br><br>
<font class="titulo">Brásilia</font><br>
<font class="texto">SRTVN Ed. Centro Empresarial<br></font>
<font class="texto">Norte - Bloco B - Sala 321/323<br></font>
<font class="texto">CEP: 70719-900<br></font>
<font class="texto">Telefone/FAX: (61)328 <span style="dislpay:none;">- </span>1118</font>
<br><br>
<font class="titulo">Cliente</font><br>
<table style="margin-top:10px;">
<tr>
	<td>
<font class="texto">Login:<br></font>
	</td>
	<td>
<input type="text" name="login" size="15" class="input">
	</td>
</tr>
<tr>
	<td>
<font class="texto">Senha:<br></font>
	</td>
	<td>
<input type="password" name="senha" size="15" class="input">
	</td>
</tr>
</table>
</div>
<div id="conteudo">
<iframe src="conteudo.html" name="frame" frameborder="no" scrolling="no" height="400"></iframe>
</div>
<div id="rodape">
</div>
</td>
</div>
</table>

</body>
</html>

Alguem pode me ajudar?

desde já agradeço ^_^

Evandro Oliveira · Agosto 25, 2011

comece tirando o leiaute da tabela.

Entrar

Arquivado

Menu dropdow

Recommended Posts

mateusguitar1 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante