Foros del Web » Creando para Internet » HTML »

problema con menú desplegable html/js/css

Estas en el tema de problema con menú desplegable html/js/css en el foro de HTML en Foros del Web. Hola, Os cuento que no se porqué estoy teniendo un problema que la lista desplegable que he hecho con js , la cosa es que ...
  #1 (permalink)  
Antiguo 28/09/2013, 09:11
 
Fecha de Ingreso: septiembre-2013
Mensajes: 1
Antigüedad: 10 años, 6 meses
Puntos: 0
problema con menú desplegable html/js/css

Hola, Os cuento que no se porqué estoy teniendo un problema que la lista desplegable que he hecho con js , la cosa es que la lista es como si ocupase el 100% del ancho de la pantalla entonces no importa en que sitio pongas el ratón que se va abrir, de todas maneras para que se vea mas claro, poner el ratón en uno de los elementos de la lista y desplazaros hacia la derecha, vereis que nunca acaba. Lo siento si es algo sencillo y que debería saber pero el caso q llevo muy poco con esto.

Aquí dejo el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#lista1 {
visibility:hidden;

}

</style>

<script type="text/javascript">
function mostrar(dof){
if(dof == 'd'){
document.getElementById('lista1').style.visibility = 'visible';
} else {
document.getElementById('lista1').style.visibility = 'hidden';
}
}
</script>
</head>

<body>
<ul>
<li onmouseover="mostrar('d')" onmouseout="mostrar('f')">

Administrar

<div id="lista1">
<ol>
<li>Editar Fotos</li>
<li>Eliminar Fotos</li>
<li>Ejemes</li>
</ol>
</div>
</li>
</ul>
</body>
</html>

En esta página http://htmledit.squarefree.com/ podéis ejecutar el código online y pasa exactamente el mismo problema.

Gracias por vuestra atención :)
  #2 (permalink)  
Antiguo 29/09/2013, 04:54
Avatar de jcry87  
Fecha de Ingreso: septiembre-2013
Mensajes: 8
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: problema con menú desplegable html/js/css

Buenas, tu problema es que le asignas el efecto mouseover a la etiqueta <li> y eso hace que cuando pase dentro de todo el contenido de <li> que son tus opciones de tu menu, entonces se activa el efecto de js que estas poniendo, por eso al texto "Administrar" ponlo dentro de un <span> y asunto arreglado, recuerda que deberias trabajar con divs que limiten segmentos de tu pagina y colocarles un width con su tamaño en pixeles o en porcentajes para asi delimitar las zonas de tu pagina y asi evitar problemas de mouseover o mouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#lista1 {
visibility:hidden;
}

</style>

<script type="text/javascript">
function mostrar(dof){
if(dof == 'd'){
document.getElementById('lista1').style.visibility = 'visible';
} else {
document.getElementById('lista1').style.visibility = 'hidden';
}
}
</script>
</head>

<body>
<ul>
<li>
<span onmouseover="mostrar('d')" onmouseout="mostrar('f')">Administrar</span>
<div id="lista1">
<ol>
<li>Editar Fotos</li>
<li>Eliminar Fotos</li>
<li>Ejemes</li>
</ol>
</div>
</li>
</ul>
</body>
</html>

Etiquetas: css, desplegable, página
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:25.