He maquetado una pagina con un body, un contenedor, una cabecera , el siguiente menú, un cuerpo y un pie, y el menú es horizontal desplegable en horizontal pero al probar el código en el navegador me come el cuerpo que hay debajo y quisiera saber como lo arreglo , un saludo.
Código html
<div id=”menú”>
<div id=”nav”>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quiénes somos</a>
<ul><li><a href="">Historia</a></li>
<li><a href="">Prensa</a></li></ul>
</li>
<li><a href="#">Servicios</a>
<ul><li><a href="">Servicio 1</a></li>
<li><a href="">Servicio 2</a></li>
<li><a href="">Servicio 3</a></li>
<li><a href="">Servicio 4</a></li></ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
Codigo css
*{margin:0;padding:0;box-sizing:border-box;font-size:0;}
menu{
width:900
}
menu{
width:100%;
max-width:900px;
margin:auto;
}
nav{
position:relative;
margin:auto;
}
nav a{
text-decoration:none;
color:inherit;
font-size:20px;
}
nav li{
display:inline-block;
width:158px;
height:30px;
padding:5px 10px;
border:1px solid #000;
text-align:center;
background-color:#000;
color:#fff;
float:left
list-style-type:none}
nav li:hover{
background-color:#fff;
color:#000;
}
nav li>ul{
position:absolute;
left:0px;
top:30px;
display:block;
}
nav li>ul{
display:none;
}
nav li:hover>ul{
display:block;
}
