<!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" xml:lang="pt-br" lang="pt-br">
<head>
<title>Navegação</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
#nav, #nav ul {
width: 533px;
list-style: none;
font:10px Verdana, Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}
#nav li {float: left;}
#nav a {
display: block;
width: 76px;
line-height: 3;
text-align: center;
text-decoration: none;
background-color: #b5cfea; /* IE precisa desta declaração */
color: #030303;
}
#nav a:hover {
text-decoration: none;
background: #a3c1e3;
color:#030303;
}
#nav a.bullet{background:url(Imagens/bullet.gif) no-repeat right #EDEDED;}
#nav a.bullet:hover{background:url(Imagens/bullet.gif) no-repeat right #b5ceec;}
#detectores{border:1px solid #cccccc;}
#detectores a{width:89px;height:17px;text-align:left; background:#EDEDED;line-height:1;}
#detectores a{border-left:1px solid #fff;border-top:1px solid #fff; border-bottom:1px solid #d7d7d7;}
#detectores a:hover{background: #b5ceec}
#teste {width:190px;}
#nav li ul {
position: absolute;
left: -1000em;
width: 89px;
margin: 0;
}
#nav li ul {
position: absolute;
left: -1000em;
width: 89px;
margin: 0;
}
#nav ul ul {margin: -2.1em 0 0 8.8em;}
#nav li:hover ul ul, #nav li.over ul ul {left: -1000em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
left: auto;
}
ul#nav li.over ul li ul,
ul#nav li:hover ul li ul {
display: none;
}
ul#nav li.over ul li.over ul,
ul#nav li:hover ul li:hover ul {
display: block;
}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
// Código publicado por Nick Rigby baseado no original de Patrick Griffiths
function IEHoverPseudo() {
var navItems = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "submenu") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = " submenu"; }
}
}
}
window.onload = IEHoverPseudo;
</script>
<![endif]-->
</head>
<body>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="empresa.html">Empresa</a></li>
<li class="submenu"><a href="#">Produtos</a>
<ul id="detectores">
<li class="submenu"><a class="bullet" href="#">Detectores</a>
<ul>
<li><a href="DB-50.html">DB-50 "Portátil"</a></li>
<li><a href="DB-200.html">DB-200 "Sorteador Aleaótório"</a></li>
<li><a href="DB-2000.html">DB-2000 "Tipo Pórtico" </a></li>
<li><a href="DB-900V.html">DB-900V "Detector de Veículos"</a></li>
<li><a href="DB-1000.html">DB-1000 "Detector p/ Correias" </a></li>
<li><a href="DB-200V.html">DB-200V "Sorteador de Veic." </a></li>
<li><a href="DB-1000.html">DB-1000 plus "Esteiras" </a></li>
</ul>
</li>
<li class="submenu"><a class="bullet" href="#">Acessórios</a>
<ul>
<li><a href="fontec.html">Fonte Chaveada</a></li>
<li><a href="fotoc.html">Foto Célula</a></li>
<li><a href="no-break.html">No-Break</a></li>
<li><a href="alarmesm.html">Alarmes Monitorados</a></li>
<li><a href="cameras.html">Câmeras (CFTV) </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="assistencia.html">Assistência</a></li>
<li><a href="suporte.html">Suporte</a></li>
<li><a href="locacao.html">Locação</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</body>
</html>Precisava que o box que abre quando se passa o mouse sobre Detectores e Acessórios fosse maior do que o que estão contidos esses elementos. Ou seja, quando passar o mouse sobre Produtos, depois Detectores, este box fosse maior que o outro para o texto caber na horizontal.
Alguem pod me ajudar?
Obrigada
