JSFiddle - React, Tailwind, and code Playground

by maximka787

HTML

<nav id="nav">
<ul>
<li><a href="#">Одежда</a><div class="block">111</div></li>
<li><a href="#">Обувь</a><div class="block">222</div></li>
<li><a href="#">Аксессуары</a><div class="block">333</div></li>
<li><a href="#">Детям</a><div class="block">444</div></li>
</ul>
</nav>

CSS

#nav{
background-color:#507499;
}

#nav ul{
list-style:none;
padding:0;
margin:0;
height:30px;
display:block;
}

#nav ul li{
float:left;
}

#nav ul li a{
display:block;
color:#FFFFFF;
padding:4px 70px 0 70px;
height:26px;
font-size:16px;
background-color:#0066FF;
}

#nav ul li div.block{
width:500px;
height:200px;
background-color:#006600;
display:none;
position:absolute;
}

#nav ul li:hover .block{
display:block;
}