Cómo expandir un div padre relativo con un div hijo absoluto??? 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.
