JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="mainAuto">
<li class="mainAuto-brand">22222
<ul class="mainAuto-info">
<li><a href="#">Модификации</a></li>
<li><a href="#">Конфигуратор</a></li>
<li><a href="#">Сравнение</a></li>
<li><a href="#">Тест-Драйв</a></li>
<li><a href="#">Прайс-лист</a></li>
</ul>
</li>
<li class="mainAuto-brand">22222
<ul class="mainAuto-info">
<li><a href="#">Модификации</a></li>
<li><a href="#">Конфигуратор</a></li>
<li><a href="#">Сравнение</a></li>
<li><a href="#">Тест-Драйв</a></li>
<li><a href="#">Прайс-лист</a></li>
</ul>
</li>
<li class="mainAuto-brand">22222
<ul class="mainAuto-info">
<li><a href="#">Модификации</a></li>
<li><a href="#">Конфигуратор</a></li>
<li><a href="#">Сравнение</a></li>
<li><a href="#">Тест-Драйв</a></li>
<li><a href="#">Прайс-лист</a></li>
</ul>
</li>
<li class="mainAuto-brand">2222
<ul class="mainAuto-info__disabled">
<li><a href="#">Модификации</a></li>
<li><a href="#">Конфигуратор</a></li>
<li><a href="#">Сравнение</a></li>
<li><a href="#">Тест-Драйв</a></li>
<li><a href="#">Прайс-лист</a></li>
</ul>
</li>
<li class="mainAuto-brand">2222
<ul class="mainAuto-info__disabled">
<li><a href="#">Модификации</a></li>
<li><a href="#">Конфигуратор</a></li>
<li><a href="#">Сравнение</a></li>
<li><a href="#">Тест-Драйв</a></li>
<li><a href="#">Прайс-лист</a></li>
</ul>
</li>
</ul>
CSS
.mainAuto {
list-style: none;
display: flex;
margin-top: 5px;
position: relative;
}
.mainAuto-brand {
background-color: blue;
flex-grow: 5;
padding: 30px 25px;
border-right: 1px solid white;
}
.mainAuto-info {
position: absolute;
top: 80px;
left: 40px;
padding: 10px 25px;
list-style: none;
background-color: black;
}
.mainAuto-info a {
margin: 10px 10px;
}
.mainAuto-info__disabled {
display: none;
}