I'm learning to program, I've done the whole site, and it's practically the way I wanted it, at first I had problems with IE, the menu did not work at all, I reformulated the menu, I used examples I got on the internet, I understood all the code and finally managed to make it work correctly, but hj 01/30/2016 I discovered that the dropdown menu does not work on android, it does not open! I would like help with this problem. My site is already working www.institutoech.com.br if you can test on your smartphones already thank you.
/**
* Created by marcos paulo on 22/01/2016.
*/
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
// -->/*------- menu pagina principal -----*/
#sddm
{
position: absolute;
margin: 0;
padding: 0;
z-index: 30;}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 5px -9px 0 0;
padding: 8px 0px;
width: 117px;
background: #03647b;
color: #FFF;
text-align: center;
text-decoration: blink;
border: 3px outset #7f9db9}
#sddm li a:hover
{ background: #03647b}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #03647b;
border: 1px outset #7f9db9}
#sddm div a
{ position: relative;
display: block;
margin: 4px;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #03647b;
color: #FFFFFF;
font: 11px arial;
}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}<ul id="sddm">
<li><a href="index.html" onmouseover="mopen('m1')" onmouseout="mclosetime()">INICIAL</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" class="seta-baixo">FOTOS</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="galeria_parapsic.html" target="_self">PARAPSICOLOGIA</a>
<a href="galeria_ebf.html" target="_self">E. B. DE FERIAS</a>
<a href="galeria_turma2013.html" target="_self">TURMA DE 2013</a>
<a href="galeria_turma2015.html" target="_self">TURMAS DE 2015</a>
<a href="galeria_formandos_2014.html" target="_self">FORMANDOS 2014</a>
<a href="galeria_campanha.html" target="_self">CAMPANHA 2015</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()" class="seta-baixo">BIBLIOTECA</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="biblioteca.html" target="_self">ACERVO DA BIBLIOTECA</a>
<a href="apostilas.html" target="_self">DOWNLOAD APOSTILAS</a>
</div>
</li>
<li><a href="informacao.html" onmouseover="mopen('m4')" onmouseout="mclosetime()">INFORMAÇÕES</a>
</li>
<li><a href="sobre.html" onmouseover="mopen('m4')" onmouseout="mclosetime()">SOBRE</a>
</li>
</li>
<li><a href="contribuir.html" onmouseover="mopen('m4')" onmouseout="mclosetime()">CONTRIBUIR</a>
</li>
<li><a href="contato.html" onmouseover="mopen('m5')" onmouseout="mclosetime()">CONTATO</a>
<li><a href="http://216.172.172.225:2095/cpsess3606054867/3rdparty/roundcube/?_task=mail" target="_blank" onmouseover="mopen('m5')" onmouseout="mclosetime()">E-MAIL</a>
</li>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>