sea lo que sea, en cambio div:first-of-type refiere a el primer DIV y no a otra cosa ajena al div*/ header div:first-of-type { margin-left: -4em; transition: 0.3s all; -o-transition: 0.3s all; -ms-transition: 0.3s all; -moz-transition: 0.3s all; -webkit-transition: 0.3s all; } /* y cuando paso el mouse por encima DEL HEADER el div pasa a tener un margen izquierdo de -1em */ header:hover div:first-of-type { margin-left: 0em; } header img { width: 235px; vertical-align: middle; } header div:last-of-type { margin-right: 1em; } header h1, header h4 { text-align: right; font-family: "abel", sans-serif; margin: 0 0 0 0; } /****************** BOTONERA ********************/ nav { background-color: #000000; } nav ul { margin: 0 0 0 0; display: flex; justify-content: center; list-style-type: none; } nav > ul > li { transition: 0.3s all; -o-transition: 0.3s all; -ms-transition: 0.3s all; -moz-transition: 0.3s all; -webkit-transition: 0.3s all; } nav > ul > li:hover { background-color: #292929; } nav > ul > li > a { display: block; padding: 1em 2em 1em 2em; color:white; text-decoration: none; font-family: "abel", sans-serif; } /* el conector + indica al hermano siguiente del elemento de la izquierda. "a + ul" significa entonces "el ul que está justo después de a en la misma jerarquía" */ nav > ul > li > a + ul { display: none; /* un elemento en position: absolute se desliga del flujo de los elementos HTML, es decir, DEJA DE OCUPAR ESPACIO REAL en la página. el elemento pasa a ubicarse donde siempre, pero como viste que pasó en el menú, ya dejó de agrandar la #botonera porque justamente dejó de ocupar espacio real en el sitio, quedó "flotando". si no toco las propiedades "top", "left", "bottom", "right" el elemento va a estar ahí. pero si decido tocar estas propiedades en un elemento con position: absolute entonces va a colgarse de su punto de referencia para partir desde ahí (claro, no? porque si le digo "top: 10px" son 10px hacia abajo... desde dónde?). cuál es el punto de referencia de un elemento con position: absolute? el PRIMER elemento con position: relative que se encuentre (navegando hacia arriba a través de su elemento padre, padre del padre, y así hasta llegar a ). obviamente, si no encuentra ningún elemento con position: relative, el punto de referencia es la esquina superior izquierda del sitio. */ position: absolute; padding: 0 0 0 0; background-color: #ffba02; } nav > ul > li:hover > a + ul { display: block; } /* a los en los menúes los pongo en display:block para poder modificar su padding superior e inferior */ nav > ul > li > a + ul a { display: block; padding: 0.5em 1em 0.5em 1em; color: #000000; text-decoration: none; font-family: "abel", sans-serif; } nav > ul > li > a > ul:hover{ background-color: aqua; } /****************** MAIN ********************/ main { max-width: 1250px; margin: 0 auto 0 auto; display: flex; justify-content: space-between; } main * { font-family: "abel", sans-serif; } main > div { padding: 0 1.5em 0 1.5em; } main .secciontextos1 h2 { margin: 0; padding: 1em 0em 1em 0em; font-family: "abel", sans-serif; } main .secciontextos1 ul { margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; } main .secciontextos2 { padding-top: 79px; } main .secciontextos3 { padding-top: 79px; } /****************** FOOTER ********************/ footer { background-color: #000000; font-family: abel; color: #ffffff; padding: 2em 4em; margin-top: 2em; } footer .contenedorimagenes { display: flex; justify-content:center; } footer .contenedorimagenes a { color: #ffffff; text-decoration: none; transition: 0.3s all; -o-transition: 0.3s all; -ms-transition: 0.3s all; -moz-transition: 0.3s all; -webkit-transition: 0.3s all; } footer .contenedorimagenes a:hover { opacity: 0.75; } footer .contenedorimagenes img { width: 2em; margin: 1em; } footer p { font-style: italic; }