I'm trying to make a menu with pure CSS, and I'm making progress little by little, but I have a problem. In the first level options (and well, in all the other options too), why does the background color appear bigger than the image?
This is my code:
/*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>
<a>
This happens to you because you are giving your label apadding
super big up-down, you solve it by doing this:Cheers !