Bug IE versões anteriores ao 7.0
Olá pessoal,
Eu criei um menu drop down e ele funcionou corretamente no IE 7.0. Mas quando fui testar no IE 6.0 os sub-menus ficavam desalinhados,como faço pra consertar esse bug??Me ajudem!! O código é esse:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) xml:lang="pt-br" lang="pt-br">
<head>
<meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" />
<meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." />
<meta name="author" content="Nick Rigby" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="language" content="pt-br" />
<meta name="ICBM" content="-22.975781,-43.193082" />
<meta name="DC.title" content="CSS para Web Design" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Drop Down Menus - Parte 3</title>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems*.className == "menuparent") {*
* navItems**.onmouseover=function() { this.className += " over"; }*
* navItems**.onmouseout=function() { this.className = "menuparent"; }*}
}
}
window.onload = IEHoverPseudo;
</script>
<style type="text/css">
body { font: normal 62.5% verdana; }
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
/ width: 600px; / / Width of Menu Items /
border-bottom: 0px; solid #ccc;
background: #fff; / IE6 Bug /
/ background: blue; / IE6 Bug / cor do fundo dos menus*
font-size: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
display: inline;
float:left;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
text-align:center;
float:left;
color: #000;
/ color: red; cor das letras do menu /
border: 1px solid #ccc;
border-bottom: 1px;
margin: 0;
padding: 0;
list-style: none;
width: 130px;
height:20px;}
/ Fix IE. Hide from IE Mac \/
** html ul#primary-nav li { float: left; height: 1%; }*
** html ul#primary-nav li a { height: 1%; }*
/ End /
/ Fix IE. Hide from IE Mac \/
** html ul li { float: left; height: 1%; }*
** html ul li a { height: 1%; }*
/ End /
ul#primary-nav ul {
position: absolute;
display: none;
left: 0px; / Set 1px less than menu width /
top: 21px;
}
ul#primary-nav li ul li a { padding: 0; } / Sub Menu Styles /
ul#primary-nav li:hover ul ul ,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul {display: none; top: 17px;} / Hide sub-menus initially /
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } / The magic /
ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }
/ ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> /
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; }
/ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu /
ul#primary-nav li a:hover { color: #E2144A; }
/ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo /
*</style>*
*</head>*
<body>
*<table width="800" height="394" border="0" align="center">*
* <tr>*
* <td width="791" height="157" valign="top"><table width="801" height="123" border="0">*
* <tr>*
* <td width="976" height="119" valign="bottom" background="imagens/mestre.png"><table width="796" border="0">*
* <tr>*
* <ul id="primary-nav"> <li><a href="#">Principal</a></li>*
* <li class="menuparent"><a href="#">A Empresa </a> *
* <ul>*
* <li><a href="historia.html">História</a></li>*
* <li><a href="#">Atuação no Mercado</a></li>*
* <li><a href="#">Missão</a></li>*
* <li><a href="#">Visão</a></li>*
* <li><a href="#">Valores</a></li>*
* </ul>*
* </li>*
* <li class="menuparent"><a href="#">Obras Realizadas </a> *
* <ul>*
* <li><a href="#">Obra 1</a></li>*
* <li><a href="#">Obra 2</a></li> *
* <li><a href="#">Obra 3</a></li> *
* <li><a href="#">Obra 4</a></li> *
* </ul>*
* </li>*
* <li class="menuparent"><a href="#">Dicas de Contrução </a> *
* <ul>*
* <li><a href="#">United Kingdom</a></li>*
* <li><a href="#">France</a></li>*
* <li><a href="#">USA</a></li>*
<li><a href="#">Australia</a></li>
* </ul>*
* </li>*
* <li class="menuparent"><a href="#">Nosso Parceiros</a> *
* <ul>*
* <li><a href="#">Empresas</a></li>*
* <li><a href="#">Orgãos</a></li>*
* <li><a href="#">Ong´s</a></li>*
* </ul>*
* </li>*
* <li class="menuparent"><a href="#">Fale Conosco</a> *
* <ul>*
* <li><a href="#">Informações</a></li>*
* <li><a href="#">Deixe um Recado</a></li>*
* </ul>*
* </li>*
*</ul>*
* </tr>*
* </table></td>*
* </tr>*
* </table>*Discussão (3)
Carregando comentários...