Hola, ¿porque no se me despliega el menú para abajo?Quisisera que al hacer hover sobre el li menu desplegable, se me mostrasen el resto de lis para abajo, le he dado mil vueltas al html y al css, pero solo he conseguido que se me desplegaran abajo hacia la derecha, ahora mismo ni se me despliegan, que tengo que hacer? en que consiste mi error?La verdad que me gustaría poder resolver mi error y mis dudas, así como que significa display, block y las positions absolut y relative aun que algo si me imagino pero no las tengo todas conmigo.
Os envio el codigo html:
<!doctype html>
<html>
<head>
<link rel="StyleSheet" href="styles.css" media="all" type="text/css">
</head>
<body>
<div id="global">
<header>
<hgroup>
<h1>Hola mundo en html</h1>
<h2>Así es como empieza mi página</h2>
</hgroup>
<nav>
<ul>
<li><a href="#" class="seleccionado">ELEMENTO 1</a></li>
<li><a href="#">ELEMENTO 2</a></li>
<li><a href="#">ELEMENTO 3</a></li>
<li><a href="#">Menu desplegable</a>
<ul>
<li><a href="#">Elemento despegable 1</a></li>
<li><a href="#">Elemento despegable 2</a></li>
</ul>
</li>
<li><a href="#">ELEMENTO 4</a></li>
</ul>
</nav>
</header>
<article>
<h2>Este es el título de introducción</h2>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mi dui, lacinia id fermentum eget, faucibus ut leo. Vestibulum diam neque, dapibus in dictum vel, varius eu eros. In tempus ultrices bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut id nunc vel nulla aliquet venenatis. Phasellus sed risus metus. Sed sed elementum ante. Maecenas consequat semper urna ac semper. Nulla libero ante, cursus et pharetra eu, tristique a sapien. Proin mattis feugiat purus in adipiscing.</p>
</section>
</article>
<aside>
<p>Aqui metere mis redes sociales</p>
</aside>
<footer><p>Derechos reservados para el administrador</p></footer>
</div>
</body>
</html>
Y aqui el codigo css:
body{
background:white;
}
#global{
width: 1200px;
margin: 0 auto;
}
header{
height:174px;
background: pink;
border: 1px solid red;
border-radius: 10px;
}
hgroup{
background: pink;
}
h1{
text-align:center;
color:red;
}
h2{
font-size: 14;
text-align:center;
color:red;
}
nav{
margin-left: 300px;
}
nav li a.seleccionado{
background:red;
border: 1px solid red;
border-radius: 10px;
color:white;
}
nav li{
list-style:none;
}
nav li a{
float:left;
background:white;
border: 1px solid red;
border-radius: 10px;
color: red;
}
nav >li a{
float:left;
background:white;
border: 1px solid red;
border-radius: 10px;
color: red;
}
nav li a:hover{
background:red;
border: 1px solid red;
border-radius: 10px;
color:white;
}
nav li ul{
position:absolute;
display:none;
}
nav li>ul li{
display:none;
}
nav li:hover ul{
display:block;
}
article{
width: 1000px;
float: left;
margin-top: 10px;
background:pink;
border: 1px solid red;
border-radius: 10px;
}
aside{
width: 180px;
float: right;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid red;
border-radius: 10px;
background:pink;
}
footer{
margin-top:10px;
width: 1200px;
float:left;
border: 1px solid red;
border-radius: 10px;
background:pink;
}
a{
text-decoration:none;
}
p{
text-align: center;
color:black;
}
Muchas gracias a todos, un saludo
Responder
Os envio el codigo html:
<!doctype html>
<html>
<head>
<link rel="StyleSheet" href="styles.css" media="all" type="text/css">
</head>
<body>
<div id="global">
<header>
<hgroup>
<h1>Hola mundo en html</h1>
<h2>Así es como empieza mi página</h2>
</hgroup>
<nav>
<ul>
<li><a href="#" class="seleccionado">ELEMENTO 1</a></li>
<li><a href="#">ELEMENTO 2</a></li>
<li><a href="#">ELEMENTO 3</a></li>
<li><a href="#">Menu desplegable</a>
<ul>
<li><a href="#">Elemento despegable 1</a></li>
<li><a href="#">Elemento despegable 2</a></li>
</ul>
</li>
<li><a href="#">ELEMENTO 4</a></li>
</ul>
</nav>
</header>
<article>
<h2>Este es el título de introducción</h2>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mi dui, lacinia id fermentum eget, faucibus ut leo. Vestibulum diam neque, dapibus in dictum vel, varius eu eros. In tempus ultrices bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut id nunc vel nulla aliquet venenatis. Phasellus sed risus metus. Sed sed elementum ante. Maecenas consequat semper urna ac semper. Nulla libero ante, cursus et pharetra eu, tristique a sapien. Proin mattis feugiat purus in adipiscing.</p>
</section>
</article>
<aside>
<p>Aqui metere mis redes sociales</p>
</aside>
<footer><p>Derechos reservados para el administrador</p></footer>
</div>
</body>
</html>
Y aqui el codigo css:
body{
background:white;
}
#global{
width: 1200px;
margin: 0 auto;
}
header{
height:174px;
background: pink;
border: 1px solid red;
border-radius: 10px;
}
hgroup{
background: pink;
}
h1{
text-align:center;
color:red;
}
h2{
font-size: 14;
text-align:center;
color:red;
}
nav{
margin-left: 300px;
}
nav li a.seleccionado{
background:red;
border: 1px solid red;
border-radius: 10px;
color:white;
}
nav li{
list-style:none;
}
nav li a{
float:left;
background:white;
border: 1px solid red;
border-radius: 10px;
color: red;
}
nav >li a{
float:left;
background:white;
border: 1px solid red;
border-radius: 10px;
color: red;
}
nav li a:hover{
background:red;
border: 1px solid red;
border-radius: 10px;
color:white;
}
nav li ul{
position:absolute;
display:none;
}
nav li>ul li{
display:none;
}
nav li:hover ul{
display:block;
}
article{
width: 1000px;
float: left;
margin-top: 10px;
background:pink;
border: 1px solid red;
border-radius: 10px;
}
aside{
width: 180px;
float: right;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid red;
border-radius: 10px;
background:pink;
}
footer{
margin-top:10px;
width: 1200px;
float:left;
border: 1px solid red;
border-radius: 10px;
background:pink;
}
a{
text-decoration:none;
}
p{
text-align: center;
color:black;
}
Muchas gracias a todos, un saludo
Responder