Menu aparece por debaixo de <div>

Tedioboy · July 30, 2014 at 05:49 PM

(Pergunta e código alterado)

O meu código pode resumir-se ao seguinte:

<body>
<center>
<div class="site">
 <div class="menu">
   <table style="width: 100%">
     <tr>
       <td><input type="button" value="menu1" onclick="window.location.href='menu1.php'" /></td>
       <td><input type="button" value="menu2" onclick="window.location.href='menu2.php'" /></td>
       <td><input type="button" value="menu3" onclick="MostraSubMenu()" id="menu3" /></td>
       <td><input type="button" value="menu4" onclick="window.location.href='menu4.php'" /></td>
     </tr>
   </table>
 </div>
 <div id="submenu" style="width: auto; display: none; position: absolute; z-index: 9999;">
   <input type="button" value="submenu1" /><br />
   <input type="button" value="submenu2" /><br />
   <input type="button" value="submenu3" /><br />
   <input type="button" value="submenu4" />
 </div>
 <script type="text/javascript">
   function MostraSubMenu() {
     var divbot = document.getElementById('menu3');
     if(document.getElementById('submenu').style.display == 'none') {
       document.getElementById('submenu').style.left = divbot.style.left;
       document.getElementById('submenu').style.top = divbot.style.top + 30;
       document.getElementById('submenu').style.display = 'block';}
     else {
       document.getElementById('submenu').style.display = 'none';
     };
   };
 </script>
 <div class="content">
   (conteúdo do site)
 </div>
</div>
</center>
</body>

Isto está funcional no Chrome, o submenu fica invisivel ou é mostrado quando se clica no botão menu3. mas a div onde está o submenu não muda de posição, ficando à esquerda no local onde aparece inicialmente no código.

Aparentemente as funções .style.top e .style.left não funcionam.

Por outro lado, se eu meter a div do submenu dentro da td onde está o botão menu3 (aí não precisava de reposicionar o left e o top do submenu), o submenu vai aparecer por debaixo da div seguinte (<div class="content">).

Será que o facto de estarem ambas as div do menu e submenu dentro de uma div geral do site inibe as funções de posicionamento?

Estarei a escrever mal o código Javascript?

Agradeço desde já a ajuda que me puderem dar.

Edited July 30, 2014 at 09:13 PM by Tedioboy

HappyHippyHippo · July 30, 2014 at 07:58 PM

e estilo z-index foi adicionado ao elemento com o id "Menu2" ?

Sign In

Menu aparece por debaixo de <div>

Recommended Posts

Tedioboy

Link to comment

Share on other sites

HappyHippyHippo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information