<header>
<a href="" class="logo">Лого</a>
<h1>Тут будет текст </h1>
<nav>
<ul class="menu">
<li><a href="#">Меню</a>
<ul class="submenu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</li>
</ul>
</nav>
</header>
header {
background: grey;
text-align: center;
}
header a {
text-decoration: none;
outline: none;
display: block;
transition: .3s ease-in-out;
}
.logo {
color: #D5B45B;
font-family: 'Playfair Display', serif;
font-size: 2.5em;
padding: 20px 0;
text-align: left;
padding-left: 100px;
}
nav {
display: table;
margin: 0 auto;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu > li {
width: 25%;
float: left;
position: relative;
font-family: 'Open Sans', sans-serif;
}
.menu > li > a {
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #404040;
padding: 15px 30px;
}
.menu > li:hover > a, .submenu li:hover a {color: #D5B45B;}
.submenu-link:after {
content: "\f107";
font-family: "FontAwesome";
color: inherit;
margin-left: 10px;
}
.submenu {
background: #273037;
position: absolute;
left: 0;
top: 100%;
z-index: 5;
width: 180px;
opacity: 0;
transform: scaleY(0);
transform-origin :0 0;
transition: .5s ease-in-out;
}
.submenu a {
color: white;
text-align: left;
padding: 12px 15px;
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.submenu li:last-child a {border-bottom: none;}
.menu > li:hover .submenu {
opacity: 1;
transform: scaleY(1);
}
чет немогу понять как мне его сдвинуть вверх, над текст