background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));<header>
<div class="logo">
<h1>Logo</h1>
</div>
<div class="right-header">
<div class="name">
<h2>name</h2>
</div>
<div class="description">
<p>description</p>
</div>
</div>
</header>header {
position: relative;
width: 100%; height: 200px;
outline: 2px solid #000;
}
header, header * {
padding: 0;
margin: 0;
}
.logo {
position:absolute;
outline: 1px solid #000;
width: 200px; height: 200px;
}
.right-header {
position: absolute;
right: 0; top: 0;
width: calc(100% - 200px);
}
.name {
width: 100%;
height: 70px;
outline: 1px solid #000;
right: 0; top: 0;
text-align: center;
}
.description {
width: 100%;
height: 130px;
outline: 1px solid #000;
right: 0; top: 0;
text-align: center;
}$(this).parent("li").children("ul") display: block;
position: relative;
width: 90%; /* это не важно */display: block;
width: 30%; /* это наверное уже у тебя в js будет вычисляться */
position: absolute;
top: 22%; left: 40%; /* тоже через js будешь вычислять */