JSFiddle - React, Tailwind, and code Playground
HTML
<div class="header">
<div class="header__info">
<div class="info">INFO</div>
</div>
<div class="header__menu">
<ul class="menu">
<li class="menu__item"><a href="#">Пункт</a></li>
<li class="menu__item menu__item_active"><a href="#">Пункт</a></li>
<li class="menu__item menu__item_submenu">
<a href="#">Пункт с подменю</a>
<div class="menu__submenu">
<div class="menu__submenu">
<ul class="submenu">
<li class="submenu__item"><a href="#">Пункт подменю</a></li>
<li class="submenu__item"><a href="#">Пункт подменю</a></li>
<li class="submenu__item submenu__item_active"><a href="#">Пункт подменю</a></li>
</ul>
</div>
</div>
</li>
<li class="menu__item">Пункт</li>
</ul>
</div>
<div class="header__logo">
<div class="logo">LOGO</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
}
/******************/
.header__logo {
width: 100px;
float: left;
}
.header__menu {
float: right;
width: 600px;
}
.header__info {
width: 100px;
float: left;
}
/******************/
.menu__item {
float: left;
width: 150px;
list-style: none;
}
.menu__item a {
color: red;
}
.menu__item a:hover {
text-decoration: underline;
}
.menu__item_active a {
color: blue;
}
.menu__submenu {
padding-left: 20px;
}
.submenu__item {
font-size: 12px;
}
.submenu__item a {
color: grey;
}