JSFiddle - React, Tailwind, and code Playground
HTML
<div class="b-main-menu">
<ul class="b-main-menu__list">
<li class="b-main-menu__item">
<h2><a href="" class="b-main-menu__link">Подгузники</a></h2>
</li>
<li class="b-main-menu__item">
<h2><a href="" class="b-main-menu__link">Уход за малышом</a></h2>
<div class="b-sub-main-menu">
<ul class="b-sub-main-menu__list b-sub-main-menu__list_left">
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Бутылочки, соски, пустышки</a></li>
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Стульчики для кормления</a></li>
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Посуда</a></li>
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Электроника</a></li>
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Аксессуары для кормления</a></li>
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Бутылочки, соски, пустышки</a></li>
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Стульчики для кормления</a></li>
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Посуда</a></li>
<li class="b-sub-main-menu__item"><a class="b-sub-main-menu__link" href="#">Электроника</a></li>
</ul>
</div>
...
CSS
.b-main-menu{
margin:5px 0 0 4px;
position:relative;
}
.b-main-menu__list{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
height:40px;
margin:0 0 25px;
padding:0 174px 0 10px;
}
.b-main-menu__item{
background:#9bcdea;
border-right:3px solid #fff;
display:inline-block;
height:40px;
position: relative;
}
.b-main-menu__item:hover{
margin-right:-10px;
padding-right:10px;
margin-left:-10px;
padding-left:10px;
height:50px;
background:#b3daf1;
}
.b-main-menu__item:last-child{
border:none;
}
.b-main-menu__hover{
height:51px;
left:-3px;
position:absolute;
top:-3px;
outline:1px solid blue;
}
.b-main-menu__link{
display:inline-block;
color:#555;
height:20px;
font:14px Arial,sans-serif;
padding:11px 8px 11px 8px;
text-decoration:none;
}
.b-main-menu__link:hover{
text-decoration:underline;
}
.b-sub-main-menu {
position: absolute; /*--Important--*/
top: 44px; left:-5px;
z-index: 99999;
background:#d2e2eb;
display: none; /*--Hidden for those with js turned off--*/
}
.b-sub-main-menu__list{
display:inline-block;
padding:0 15px 0 15px;
vertical-align:top;
}
.b-sub-main-menu__list_left{
background:#b3daf1;
border-right:1px solid #d2e2eb;
width:235px;
}
.b-sub-main-menu__list_left .b-sub-main-menu__item{
border-bottom:1px solid #cce0ec;
padding:10px 0;
}
.b-sub-main-menu__list_left .b-sub-main-menu__item:last-child{
border-bottom:none;
}
.b-sub-main-menu__list_left...
JavaScript
$('.b-main-menu__item').hover(function(){$(this).children('.b-sub-main-menu').stop(true, true).fadeToggle(300);});