Hola buenas tardes forosdelweberos, ando unos días liado con un tema que me intriga mucho.
Estoy haciendo un menú expandible para una web, y para ello estoy utilizando javascript.
El caso es que el menú es de 3 niveles, y para ello tengo 2 divs anidados. El div padre es relativo, y los 2 hijos son absolutos, y lo manejo todo con eventos javascript onmouseover y onmouseout. para hacer aparecer o desaparecer las diferentes opciones.
Mi problema está en que cuando muevo el ratón por encima del padre, me aparecen las opciones de los hijos, y cuando voy a clicar encima de los hijos, éstos desaparecen antes de que pueda clicar encima de ellos.
Este es el código html :
<a class="std_menu_1a" href="/neomedicinternational/index.php?id_seccio_menu=12"> </a>
<div id="menu_level1_12" class="menu_home_1_off" onclick="over_first_level_menu('menu_level1_12', 'submenu_home_12')" onmouseover="over_first_level_menu('menu_level1_12 ', 'submenu_home_12')" onmouseout="out_first_level_menu('menu_level1_12', 'submenu_home_12')">
<a class="std_menu_1a" href="/neomedicinternational/index.php?id_seccio_menu=12"> PRODUCTS </a>
<div id="submenu_home_12" class="submenu_home" style="display: none;">
Este es el código css:
.menu_home_1_off {
color:#FFFFFF;
font-family:'Arial';
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:16px;
line-height:normal;
padding-top:2px;
position:relative;
text-align:center;
text-decoration:none;
z-index:99;
}
.menu_home_1_on {
background-color:#2459A5;
color:#FFFFFF;
text-align:center;
cursor:pointer;
}
.submenu_home {
display:none;
left:0;
position:absolute;
top:18px;
z-index:99;
}
Y este es el código js :
function over_first_level_menu(element_menu, capa){
$('#'+element_menu).addClass('menu_home_1_on');
var ancho = 0;
if (parseInt(document.getElementById(element_menu).of fsetWidth) < 100) {
ancho = 100;
} else {
ancho = parseInt(document.getElementById(element_menu).off setWidth);
}
$('#'+capa).css('width', ancho-1);
$('#'+capa).show();
}
function out_first_level_menu(element_menu, capa){
$('#'+element_menu).removeClass('menu_home_1_on');
$('#'+capa).hide();
}
Si alguien se ha topado con algún problema de este tipo o sabe de algún truquillo para solucionarlo, agradeceria mucho su colaboración.
Muchisimas gracias de antemano.