« anterior próximo »
Páginas: [1]

Autor Tema: Problemas con Menu desplegable mostrar submenú mouse sobre link hover CU01050D  (Leído 2271 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Problemas con Menu desplegable mostrar submenú mouse sobre link hover CU01050D
« en: 09 de Abril 2017, 03:24 »
Queridos, buenas noches. Realizando el ejercicio CU01050D del tutorial básico de programación web desde cero con CSS.

No logro comprender como el sub-menu se mantiene en pantalla una vez que el mouse deja de pasar por el link (hover).

Hice este ejemplo y no logro comprenderlo.

HTML

Código: [Seleccionar]

<!DOCTYPE html>
<!-- Código base para el curso CSS -->

<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Desplegable-propio2.css">
</head>

<body>

<div id="contenedor">
<h1> CSS - Menú desplegable </h1>
<h2> aprenderaprogramar.com </h2>
<div id="menu">
<ul>
<li> <span> Libros </span>
<ul id="primero">
<li> Item </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</li>
<li> <span> Detalles </span> </li>
<li> <span> Contactos </span> </li>
<li> <span> Datos </span> </li>
</ul>
</div>



</div>


</body>

</html>


CSS

Código: [Seleccionar]


span {text-align:center;}
h1,h2 {text-align:center;}
#contenedor {border:solid 3px blue; width:500px; height:350px; margin:auto;}
#menu {width:400px; height:30px; background-color:#e1f4fb; margin:auto;}
ul {margin-left:1%}
li {width:67px; height:19px; list-style:none; float:left; background-color:#c4f3a4; margin-left:9px; margin-top:5px; text-align:center;}

#primero {display:none;}
#primero li {margin-top:5px; margin-left:-41px;}
#menu:hover ul {display:block;}



« Última modificación: 17 de Junio 2017, 13:26 por Alex Rodríguez »
En línea

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:Problemas con Menu desplegable (CU01050D)
« Respuesta #1 en: 11 de Abril 2017, 11:43 »
Prueba con esto
Código: [Seleccionar]

<!DOCTYPE html>
<!-- Código base para el curso CSS -->

<html>
<head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style>

span {text-align:center;}
h1,h2 {text-align:center;}
#contenedor {border:solid 3px blue; width:500px; height:350px; margin:auto;}
#menu {width:400px; height:30px; background-color:#e1f4fb; margin:auto;}
ul {margin-left:1%}
li {
  width:67px; height:19px;
  list-style:none;
  float:left;
  background-color:#c4f3a4;
  margin-left:9px;
  margin-top:5px;
  text-align:center;}

#primero ul{
  display:none;
}
#primero:hover ul {display:block;
                  position:absolute;
                margin:0;
              padding:0;}

#menu li:hover li { float: none; }
</style>
</head>

<body>

<div id="contenedor">
<h1> CSS - Menú desplegable </h1>
<h2> aprenderaprogramar.com </h2>
<div id="menu">
<ul>
<li id="primero">Libros
<ul >
<li> Item 1</li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
</li>
<li> <span> Detalles </span> </li>
<li> <span> Contactos </span> </li>
<li> <span> Datos </span> </li>
</ul>
</div>



</div>


</body>

</html>
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".