Estoy tratando de hacer un menu con puro CSS, y poco a poco avanzo, pero tengo un problema. En las opciones de primer nivel (y bueno, tambien en todas las demás opciones), ¿Por qué sale el color de fondo más grande que la imagen?
Éste es mi código:
/*Padding y margin para todos los elements*/
* {
padding: 0;
margin: 0;
}
/*Position y color de fondo de barra de navegación*/
nav {
position: relative;
background: white;
}
/*Bloque para opciones de primer nivel*/
.options {
list-style: none;
box-shadow: 1px 1px 15px grey;
color: #e6b800;
}
/*Opciones de primer nivel*/
.level1 {
display: inline-block;
}
a {
padding: 20px;
text-decoration: none;
color: grey;
}
a:hover {
color: white;
background: #e6b800;
}
li div {
visibility: hidden;
width: 100%;
position: absolute;
left: 0;
background: white;
z-index: -1;
}
li:hover div {
visibility: visible;
}
li div ul {
display: inline-block;
vertical-align: top;
}
li div ul li {
display: block;
}
li div ul li a {
color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="options">
<li class="level1"><a href="#">Menu 1</a>
<div>
<ul>
<li><a href="#">This is a long sub item 1</a></li>
<li><a href="#">sub item 2</a></li>
<li><a href="#">sub item 3</a></li>
</ul>
<ul>
<li><a href="#">Part two: sub item 1</a></li>
<li><a href="#">Part two: sub item 2</a></li>
<li><a href="#">Part two: sub item 3</a></li>
<li><a href="#">Part two: sub item 4</a></li>
</ul>
</div>
</li>
<li class="level1"><a href="#">Menu 2</a>
<div>
<ul>
<li><a href="#">different sub item 1</a></li>
<li><a href="#">different sub item 2</a></li>
</ul>
</div>
</li>
<li class="level1"><a href="#">Menu 3</a>
<div>
<ul>
<li><a href="#">some more items 1</a></li>
<li><a href="#">here's a really long item 2</a></li>
<li><a href="#">some more items 3</a></li>
<li><a href="#">short item 4</a></li>
<li><a href="#">some more items 5</a></li>
<li><a href="#">item 6</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</body>
</html>