Cambiar un <Div> al hacer Hover en un enlace.
Hola, estoy siguiendo el curso "Introducción al Desarrollo Web Responsive con HTML y CSS", y me he aventurado a hacer una página web, pero me he atascado un poco en el menú, ya que estoy intentando hacer un menú despegable. La pregunta es:
Puedo hacer desaparecer/aparecer, un div haciendo hover en un enlance: el html está así:
<!DOCTYPE html>
<html>
<head>
<title>Maword Games</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilos2.css">
</head>
<body id="Contacto">
<header>
<nav>
<ul class="menu">
<li><a href="index2.html">INICIO</a></li>
<li id="Galeriali"><a href="#">GALERÍA</a></li>
<li><a href="Contacto.html">CONTACTO</a></li>
</ul>
<div id="menuGaleria">
<ul>
<li><a href="#">JUEGOS</a></li>
<li><a href="#">APLICACIONES</a></li>
</ul>
</div>
</nav>
</header>
<div class="main">
<section class="Logotitle">
<img src="Logo.png" width="110px">
<p><strong><h1>Aeris Play</h1></strong>
<p><strong><h4>Juegos y aplicaciones <br> moviles</h4></strong></p>
</section>
<section class="Contactanos">
<p>Contáctanos</p>
</section>
</div>
<form class="Form">
<input type="text" placeholder="Nombre" name="Nombre"><br>
<input type="text" placeholder="Email" name="Email"><br>
<input type="text" placeholder="Asunto" name="Asunto"><br>
<input type="text" placeholder="Mensaje" name="Mensaje" id="Mensaje"><br>
<input type="submit" value="Enviar" id="Enviar">
</form>
<footer>
</footer>
</body>
</html>
Lo que que quiero es que al hacer hover en el <li> con id: "Galeriali", aparezca: el div con id: "menuGaleria";
davara2308
Ya lo he resuelto, muchas gracias.
Samie
Aunque ya lo tienes solucionado, te paso un enlace http://www.w3schools.com/howto/howto_css_dropdown.asp
Para aprender bien html + CSS puedes utilizar como referencia bootstrap. Un framework muy util como punto de partida en cualquier proyecto de desarrollo web. Sobre todo cara al responsive
Algunas notas
Los id ya no se suelen utilizar en CSS. Los id se reservan para javascript . Quizás estés utilizando javascrit.
Un <div> no debería residir dentro de un <nav> o un <ul>. Mejor opción es convertir el <ul> que tienes dentro de ese <div> en elemento de bloque. Así no lo necesitas,
Buena suerte en la aventura del aprendizaje
davara2308
Hola Samie, gracias por tu respuesta.
He estado mirando videos sobre bootstrap y es muy bueno así que gracias también por eso.
En cuanto lo del div, qué debería usar. un Section?.
Samie
El propio <ul> es por defecto un elemento de bloque.
Mira como lo hacen en bootstrap. Los ul tienen clases para poder darle sus propiedades.
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
El ejemplo esta aquí https://getbootstrap.com/examples/navbar/
conectart
Hola buenos días,
creo que lo has puesto, pero si estas aprendiendo HTML5 y CSS, te recomiendo que uses el framework bootstrap. Es muy fácil de usar, y esta muy extendido. Tiene multitud de componentes que se usan de manera muy sencilla. Nosotros en nuestro estudio de diseño conectart.com, lo usamos habitualmente.
Un saludo
David