0

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>

1 respuesta 1

2

Eso te pasa por que a tu etiqueta <a> le estas dando un padding súper grande arriba-abajo, lo resuelves haciendo esto:

a {
    padding: 0px 20px;
    text-decoration: none;
    color: grey;
}

Saludos !

6
  • Soy malisimo para CSS. Muchisimas gracias! Commented el 5 oct. 2017 a las 15:14
  • Una mejora mínima a este código, no son necesarias las unidades cuando se pone "0", o sea: padding: 0 20px;
    – Shaz
    Commented el 5 oct. 2017 a las 15:29
  • @Shaz tienes toda la razón, pero a mi personalmente siempre me gusta colocarlas, saludos ! Commented el 5 oct. 2017 a las 15:31
  • Si tienes un archivo CSS de 20 mil líneas, seguro puede haber una diferencia en el tamaño, es solo una recomendación basada en mi experiencia con archivos gigantes de CSS.
    – Shaz
    Commented el 5 oct. 2017 a las 15:33
  • @Shaz Y en un archivo minificado también se notaría una gran diferencia? No lo había visto desde ese punto de vista ! Commented el 5 oct. 2017 a las 15:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.