AE, estou fazendo um site p/ mim e estou com um problema, no meu site o menu é suspenso e quando passa o mouse em cima ele abre!! O problema é q ele não fecha. e ainda outra coisa q eu queria fazer: fazer o menu abrir em baixo do menu. EX: Quando eu passar o mouse em cima do menu1 abrir o link1,2,3,4 e 5 em baixo del, mas não abre em baixo, abre a direita!!! mas no código da onde eu pequei o menu, esta normal!!! o que eu faço??? (ai vai os códigos) Meu código!!!
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Max Scripts</title>
<base target="contents">
<style>
.baritem
{
cursor:hand;
color:black;
}
.baritem:hover
{
cursor:hand;
color:red;
}
a.
{
cursor:hand;
color:navy;
text-decoration:none;
}
a:active
{
cursor:hand;
color:navy;
}
a.cc:hover
{
cursor:hand;
color:red;
text-decoration:underline;
}
.box
{
position:absolute;
background:silver;
}
</style>
</head>
<body>
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="100%" id="AutoNumber6" height="272">
<tr>
<td width="741" style="border-style: none; border-width: medium" height="2" bgcolor="#339966" bordercolor="#333333" background="images/forest-top.jpg">
<p style="margin-left: 4; margin-top: 0; margin-bottom: 0"><br>
<b><font size="5" color="#FFFFFF" face="Arial Black">...</font></b></p>
<p style="margin-left: 4; margin-top: 0; margin-bottom: 0"><i>
<font face="Arial Black" color="#FFCC00">...
</font></i><br>
<br>
</td>
</tr>
<tr>
<td width="100%" style="border-style: none; border-width: medium" height="224" bgcolor="#FFFFFF" bordercolor="#333333" valign="top">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-left-width: 0; border-right-width: 0; border-bottom-width:0" bordercolor="#006666" width="100%" id="AutoNumber7" height="8">
<tr>
<td width="12%" style="border-left: 1px solid #006666; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style:none; border-bottom-width:medium" align="center" bgcolor="#006666" bordercolor="#339966" height="15">
<b><font face="Arial" size="2" color="#FFFFFF">
<a href="javascript:void(0)" id="item1" class="baritem">1 Menu</a><br>
<table id="item1box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor=#009900 cellspacing="0" bordercolor="#666666">
<tr><td><center><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></center></td></tr>
</table>
</font></b></td>
<td width="18%" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style:none; border-bottom-width:medium" align="center" bgcolor="#006666" bordercolor="#339966" height="15">
<b><font face="Arial" size="2" color="#FFFFFF">
<a href="javascript:void(0)" id="item2" class="baritem">2 Menu</a><br>
<table id="item2box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td><center><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></center></td></tr>
</table>
</font></b></td>
<td width="26%" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style:none; border-bottom-width:medium" align="center" bgcolor="#006666" bordercolor="#339966" height="15">
<b><font face="Arial" size="2" color="#FFFFFF">
<a href="Javascript:void(0)" id="item3" class="baritem">3 Menu</a><br>
<table id="item3box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td><center><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></center></td></tr>
</table>
</font></b></td>
<td width="24%" style="border-left-style: solid; border-left-width: 1; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style:none; border-bottom-width:medium" align="center" bgcolor="#006666" bordercolor="#339966" height="15">
<b><font size="2" color="#FFFFFF" face="Arial">
<a href="javascript:void(0)" id="item4" class="baritem">4 Menu</a></br>
<table id="item4box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td><center><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></center></td></tr>
</table>
</font></b></td>
<td width="20%" style="border-left-style: solid; border-left-width: 1; border-right: 1px solid #006666; border-top-style: solid; border-top-width: 1; border-bottom-style:none; border-bottom-width:medium" align="center" bgcolor="#006666" bordercolor="#339966" height="15">
<b><font size="2" color="#FFFFFF" face="Arial">
<a href="Javascript:void(0)" id="item5" class="baritem">5 Menu </a><br>
<table id="item5box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td><center><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></center></td></tr>
<tr><td><center><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></center></td></tr>
</table></font></b></td>
</tr>
<tr>
<td width="100%" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium" align="center" colspan="5" height="103">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="100%" id="AutoNumber8">
<tr>
<td width="77%" style="border-style: none; border-width: medium">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-left-width: 2; border-right-width: 2; border-top-width: 2; border-bottom-width: 0" bordercolor="#006666" id="AutoNumber9" height="1">
<tr>
<td width="77%" style="border-left-style: none; border-left-width: medium; border-right-style: solid; border-right-width: 1; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium" height="1" valign="top">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#006666" width="100%" id="AutoNumber11" height="1">
<tr>
<p style="margin-top: 0; margin-bottom: 0"> </td>
<td width="2%" style="border-style: none; border-width: medium" bgcolor="#FFFFFF" height="308" rowspan="2"> </td>
<td width="23%" style="border-style: none; border-width: medium" bgcolor="#FFFFFF" valign="top" height="308" rowspan="2">
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#6686CA" width="100%" id="AutoNumber12">
<tr>
<td width="100%" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium" bgcolor="#CAD6EE">
<p align="center" style="margin: 4">Place
anything you want here for your text box. Place
anything you want here for your text box. Place
anything you want here for your text box. </td>
</tr>
</table>
<p style="margin-top: 0; margin-bottom: 0"> </p>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF9933" width="100%" id="AutoNumber15" bgcolor="#FFEFAE">
<tr>
<td width="100%">
<p style="margin: 4" align="center">Place anything
you want here for your text box.
Place anything you want here for
your text box. Place anything
you want here for your text box.
<p style="margin: 4" align="center">
<p style="margin: 4" align="center"><a href="http://www.templatemonster.biz/" target="_blank"><img src="images/120x90_1.gif" width="120" height="90" border="0"></a>
</td>
</tr>
</table>
<p style="margin-top: 0; margin-bottom: 0"> </td>
<td width="2%" style="border-style: none; border-width: medium" bgcolor="#FFFFFF" height="308" rowspan="2"> </td>
<td width="45%" style="border-style: none; border-width: medium" bgcolor="#FFFFFF" valign="top" height="308" rowspan="2">
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#339966" width="100%" id="AutoNumber13" height="287">
<tr>
<td width="100%" style="border-style: solid; border-width: 1" bordercolor="#339966" bgcolor="#C5EBD8" height="287">
<p align="left" style="margin: 4">Thankyou
for choosing to download a template
by TemplateMonster.BIZ.
<p>ONLY REQUIREMENTS:<br>
-That you keep 1 AD on the template.<br>
-You may not redistribute it in
any way!</p>
<p>That's all. </p>
<p>If you use our templates and
publish them in any way <br>
it must have one ad otherwise
your not allowed.</p>
<p>This template is copyright ©
2003 Templatemonster.biz. All
right reserved,<br>
please obied by our rules.</p>
<p>Thanks.</p>
<p>For More Way Better Templates
Visit Our Site! http://www.TemplateMonsteR.BIZ
!!!</p>
<p align="left" style="margin: 4">
<p align="center" style="margin: 4"><a href="http://www.templatemonster.biz/" target="_blank"><img src="images/240x60.gif" width="240" height="60" border="0"></a><br>
</td>
</tr>
</table>
<p style="margin-top: 0; margin-bottom: 0"> </td>
<td width="2%" style="border-style: none; border-width: medium" bgcolor="#FFFFFF" height="308" rowspan="2"> </td>
<td width="23%" style="border-style: none; border-width: medium" bgcolor="#FFFFFF" valign="top" height="308" rowspan="2">
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#6686CA" width="100%" id="AutoNumber14">
<tr>
<td width="100%" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: solid; border-top-width: 1; border-bottom-style: none; border-bottom-width: medium" bgcolor="#CAD6EE">
<p align="center" style="margin: 4">Place
anything you want here for your text box. Place
anything you want here for your text box. Place
anything you want here for your text box. </td>
</tr>
</table>
<p style="margin-top: 0; margin-bottom: 0"> </p>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF9933" width="100%" id="AutoNumber15" bgcolor="#FFEFAE">
<tr>
<td width="100%">
<p style="margin: 4" align="center">Place anything
you want here for your text box.
Place anything you want here for
your text box. Place anything
you want here for your text box.
<p style="margin: 4" align="center">
<p style="margin: 4" align="center"><a href="http://www.templatemonster.biz/" target="_blank"><img src="images/120x90_1.gif" width="120" height="90" border="0"></a>
</td>
</tr>
</table>
<p style="margin-top: 0; margin-bottom: 0"> </td>
<td width="5%" style="border-style: none; border-width: medium" bgcolor="#FFFFFF" height="82"> </td>
</tr>
<tr>
<td width="5%" style="border-style: none; border-width: medium" bgcolor="#FFFFFF" height="224"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" style="border-bottom:1px solid #006666; border-left:1px solid #006666; border-right:1px solid #006666; border-top-style: none; border-top-width: medium; " align="center" colspan="5" bgcolor="#006666" height="1">
<p style="margin-top: 3; margin-bottom: 3"><b>
<font face="Verdana" size="1" color="#FFFFFF">Copyright 2005
Todos Direitos Reservados.</font></b></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>
<script language="Javascript">
window.document.onmouseover = abrir
function abrir()
{
var itens = 5
elemento = window.event.toElement
if (elemento.className == "baritem")
{
novaid = elemento.id + "box"
tabela = document.all(novaid)
tabela.style.display = "block"
}
for (i=1; i<=itens; i++)
{
abrir_item = "item" + i + "box"
abrir_elemento = document.all(abrir_item)
if ((abrir_elemento.style.display == "block") && (abrir_elemento != tabela))
{
abrir_elemento.style.display = "none"
}
if (elemento.className == "abortar")
{
abrir_elemento.style.display = "none"
}
}
}
</script>
</body>
</html>
Código do menu q eu coloquei lá!!!
<html>
<head>
<style>
.baritem
{
cursor:hand;
color:black;
}
.baritem:hover
{
cursor:hand;
color:red;
}
a.
{
cursor:hand;
color:navy;
text-decoration:none;
}
a:active
{
cursor:hand;
color:navy;
}
a.cc:hover
{
cursor:hand;
color:red;
text-decoration:underline;
}
.box
{
position:absolute;
background:silver;
}
</style>
<title>
Menus Suspensos
</title>
</head>
<body bgcolor="#000000" class="abortar" text="black" link="black" vlink="black" topmargin=0>
<div style="position: relative">
<table bgcolor="#acd6ff" height=20 width=700>
<tr>
<!-- 1º MENU DA BARRA DE MENU-->
<td align="left" nowrap valign="top">
<a href="javascript:void(0)" id="item1" class="baritem">1 Menu</a><br>
<table id="item1box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor=#009900 cellspacing="0" bordercolor="#666666">
<tr><td><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></td></tr>
<tr><td><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></td></tr>
<tr><td><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></td></tr>
<tr><td><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></td></tr>
<tr><td><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></td></tr>
</table>
</td>
<! 2 MENU DA BARRA DE MENU-->
<td align="left" nowrap valign=top>
<a href="javascript:void(0)" id="item2" class="baritem">2 Menu</a><br>
<table id="item2box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></td></tr>
<tr><td><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></td></tr>
<tr><td><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></td></tr>
<tr><td><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></td></tr>
<tr><td><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></td></tr>
</table>
</td>
<!-- 3º MENU DA BARRA DE MENU-->
<td align="left" nowrap valign="top">
<a href="Javascript:void(0)" id="item3" class="baritem">3 Menu</a><br>
<table id="item3box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></td></tr>
<tr><td><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></td></tr>
<tr><td><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></td></tr>
<tr><td><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></td></tr>
<tr><td><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></td></tr>
</table>
</td>
<td align="left" valign="top">
<a href="javascript:void(0)" id="item4" class="baritem">4 Menu</a></br>
<table id="item4box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></td></tr>
<tr><td><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></td></tr>
<tr><td><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></td></tr>
<tr><td><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></td></tr>
<tr><td><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></td></tr>
</table>
</td>
<!-- 5º MENU DA BARRA DE MENU-->
<td align="left" valign="top">
<a href="Javascript:void(0)" id="item5" class="baritem">5 Menu</a><br>
<table id="item5box" class="box" style="display:none" width="130" cellpadding="0" border="1" bgcolor="#009900" cellspacing="0" bordercolor="#666666">
<tr><td><b> <a href="http://www.link1.com.br" class=cc>Link 1</a></b></td></tr>
<tr><td><b> <a href="http://www.link2.com.br" class=cc>Link 2</a></b></td></tr>
<tr><td><b> <a href="http://www.link3.com.br" class=cc>Link 3</a></b></td></tr>
<tr><td><b> <a href="http://www.link4.com.br" class=cc>Link 4</a></b></td></tr>
<tr><td><b> <a href="http://www.link5.com.br" class=cc>Link 5</a></b></td></tr>
</table>
</td>
</tr>
</table>
</div>
<!-- FIM DOS MENUS DA BARRA DE MENU-->
<font color="white" face="arial black" size=18>
<center>
Aqui vai o corpo da página logo abaixo do menu suspenso.
<script language="Javascript">
window.document.onmouseover = abrir
function abrir()
{
var itens = 5
elemento = window.event.toElement
if (elemento.className == "baritem")
{
novaid = elemento.id + "box"
tabela = document.all(novaid)
tabela.style.display = "block"
}
for (i=1; i<=itens; i++)
{
abrir_item = "item" + i + "box"
abrir_elemento = document.all(abrir_item)
if ((abrir_elemento.style.display == "block") && (abrir_elemento != tabela))
{
abrir_elemento.style.display = "none"
}
if (elemento.className == "abortar")
{
abrir_elemento.style.display = "none"
}
}
}
</script>
</body>
</html>
me ajudem por favor!!!!