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!!!
Pergunta
Wetez
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!!!!
Link para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.