Bueno gente tengo un problema, tengo una lista no ordenada para hacer un menu de navegacion:
Código HTML:
<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</nav>
El CSS de esta lista es el siguiente:
Código:
nav {
width: 100%;
height: 50px;
background: #232323;
margin: 0 auto;
}
ul {
margin: 0 auto;
padding: 0px;
list-style-type: none;
text-align: center;
width: 50%;
}
nav ul li {
float: left;
width: 162px;
padding: 15px;
color: #FFFFFF;
}
nav ul li:hover {
background: #0072c6;
}
El problema que tengo es que al achicar la pantalla del navegador y ponerla en modo ventana, los elementos de la lista van para abajo y no se mantienen en linea, como lo puedo arreglar ? trate con clear: both; y no funciona, trate poniendolos dentro de un div y no funciona.
Cabe aclara que toda la web esta dentro de un div con anchura del 100% y altura del 100%