JSFiddle - React, Tailwind, and code Playground
HTML
<div id="block_cont">
<div id="b1">
<ul><li id="menu-item-175" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-175"><a href="http://folia.projektstrony.net.pl/category/foliapolietylenowahdpe/">Folia polietylenowa HDPE</a></li>
<li id="menu-item-176" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-176"><a href="http://folia.projektstrony.net.pl/category/foliapolietylenowaldpe/">Folia polietylenowa LDPE</a></li>
<li id="menu-item-177" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-177"><a href="http://folia.projektstrony.net.pl/category/foliapolietylenowaldpetermokurczliwa/">Folia polietylenowa LDPE Termokurczliwa</a></li>
<li id="menu-item-178" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-178"><a href="http://folia.projektstrony.net.pl/category/foliapolietylenowaldpezregranulatu/">Folia polietylenowa LDPE z Regranulatu</a></li>
<li id="menu-item-179" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-179"><a href="http://folia.projektstrony.net.pl/category/foliapolipropylenowapp/">Folia polipropylenowa PP</a></li>
<li id="menu-item-180" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-180"><a href="http://folia.projektstrony.net.pl/category/foliastretchlldpe/">Folia Stretch LLDPE</a></li>
</ul>
</div>
<div id="b2">
<ul><li id="menu-item-181" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-181"><a href="http://folia.projektstrony.net.pl/category/tasmysamoprzylepne/">Taśmy samoprzylepne</a></li>
<li id="menu-item-182" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-182"><a href="http://folia.projektstrony.net.pl/category/torbyreklamowe/">Torby reklamowe</a></li>
<li...
CSS
#block_cont {
width: 917px;
height: 245px;
margin-top: 45px;
margin-bottom: 20px;
}
#block_cont div {
float: left;
margin-right: 4px;
width: 299px;
height: 245px;
position: relative;
cursor: pointer;
overflow: hidden;
}
#block_cont div#b1 {
background: #ccc;
}
#block_cont div#b2 {
background: #ccc;
}
#block_cont div#b3 {
background: #ccc;
}
#block_cont div#b1 ul, #block_cont div#b3 ul, #block_cont div#b2 ul {
position: absolute;
top:-245px;
left: 0px;
background: #80bb02;
width: 299px;
margin: 0px;
padding: 10px 0px 10px 0px;
}
#block_cont div#b1 ul li,#block_cont div#b2 ul li, #block_cont div#b3 ul li {
list-style-type: none;
margin-left: 10px;
margin-top: 4px;
}
#block_cont div#b1 ul li a, #block_cont div#b2 ul li a, #block_cont div#b3 ul li a {
color: #fff;
font-size: 13px;
padding-left: 15px;
text-decoration: none;
}
#block_cont div a:hover {
color: #b5ed3e !important;
}
JavaScript
$('#block_cont div ').hover(function() {
$(this).find('ul').finish().animate({
top: '0px',
opacity: 0.9
}, {
duration: 500
});
}, function() {
$(this).find('ul').finish().animate({
top: '-245px',
opacity: 0.3
}, {
duration: 400
});
});