Hola chicos!!!
Tengo un menú pero quiero que las cajas de las opciones estén juntas, una al lado de la otra, pero a mí me salen separadas. Estoy tratando de usar HTML5 y CSS3.
Qué le falta a mi código?
Gracias.
Código HTML:
<head>
<link rel="stylesheet" type="text/css" href="css/estilos2.css"/>
</head>
<body>
<nav>
<ul>
<li><a href="opcion1.html">Opcion 1</a></li>
<li><a href="opcion2.html">Opcion 2</a></li>
<li><a href="opcion3.html">Opcion 3</a></li>
<li><a href="opcion4.html">Opcion 4</a></li>
</ul>
</nav>
</body>
</html>
Código HTML:
* {
border: 0;
margin: 0;
padding: 0;
}
nav{
display: block;
border: solid;
}
body{
font-family: Helvetica, Verdana;
font-size: 1em;
}
a {
color: darkgrey;
text-decoration: none;
}
a:hover {
color: blue;
}
nav {
display: inline-block;
max-width: 80% ;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
padding: 0 26px;
vertical-align: top;
}
nav a {
border: solid grey;
display: block;
font-family: Helvetica, Verdana;
font-size: 1.4em;
}
nav a:hover {
background: darkgrey;
border: solid grey;
color: white;
}