HTML - Problema menú desplegable /Html/JavaScript/CSS

   
Vista:

Problema menú desplegable /Html/JavaScript/CSS

Publicado por Randomnius! (1 intervención) el 28/09/2013 03:59:20
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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 :)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Problema menú desplegable /Html/JavaScript/CSS

Publicado por xve (1178 intervenciones) el 28/09/2013 18:06:11
Hola Randomnius, la unica manera que se me ocurre, es que sean las capas flotantes... prueba así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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;
	float:left;
}
 
</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')" style="float:left;">
      Administrar
       <ol id="lista1">
         <li>Editar Fotos</li>
         <li>Eliminar Fotos</li>
         <li>Ejemes</li>
       </ol>
    </li>
  </ul>
</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema menú desplegable /Html/JavaScript/CSS

Publicado por fe (1 intervención) el 05/05/2014 21:48:20
Buen tutorial sobre menu desplegable css. En esta pagina tambien hay un articulo sobre menu desplegable con cuadro de busqueda. Tiene demo y descarga del codigo gratis.
http://www.cattutorial.com/css/menu-desplegable-con-cuadro-de-busqueda-en-html-y-css3/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar