JSFiddle - React, Tailwind, and code Playground

by vipTelnet

HTML

<style>
.spacer{width:90%;margin:0 auto; height:1px; background-color:grey; margin: 10px}
.ttt{font-size:small;margin: 10px 0px;text-transform:uppercase;}
.zzz{width: 80%; background-color:#FEBC41; padding: 5px 15px; color:white;border-radius: 5px;}
#left-part{float:left;width:40%;}
.list-box{position: relative;margin: 15px 0px;}
.list-box .show-selected{display: none;font-size:large;padding-left:33px;background: url('/components/com_betons/assets/image/galka.png') 8px 0px no-repeat;}
.list-box .dropdown-list{display: none; position: absolute; background-color:white;border-radius: 4px;border:1px solid #FEBC41;width: 80%; left:5px;z-index:9;}
.list-box .dropdown-list li{cursor: pointer; margin-left:10px !important;}
.list-box .dropdown-list li:hover{color:#FEBC41;}

</style>

<div id="left-part" style="">
		<div>
			<div id="frostresistance" class="list-box"><div class="zzz">Морозостойкость</div><div class="dropdown-list" style="display: none;"><ul><li price="1" bid="1">F25</li><li price="2" bid="2">F50</li><li price="3" bid="3">F75</li><li price="4" bid="4">F100</li><li price="5" bid="5">F150</li><li price="6" bid="6">F200</li><li price="7" bid="7">F250</li><li price="8" bid="8">F300</li></ul></div><div class="show-selected"></div></div>		</div>
		<div>
			<div id="hydrotechnical" class="list-box"><div class="zzz">Гидротехнические свойства</div><div class="dropdown-list" style="display: none;"><ul><li price="4" bid="4">W4</li><li price="3" bid="3">W2</li><li price="5" bid="5">W6</li><li price="6" bid="6">W8</li><li price="7" bid="7">W10</li><li price="8" bid="8">W12</li><li price="9" bid="9">W14</li><li price="10" bid="10">W16</li></ul></div><div class="show-selected"></div></div>		</div>
		<div>
			<div id="mobility" class="list-box"><div class="zzz">Подвижность</div><div class="dropdown-list" style="display: none;"><ul><li price="2" bid="2">555</li><li price="3" bid="3">33</li></ul></div><div class="show-selected"></div></div>		</div>
		<div>
			<div...

JavaScript

$('.list-box').hover(
	function(){		
	 	$(this).find('.dropdown-list').slideDown(500);   
	},
	function(){
	  	$(this).find('.dropdown-list').slideUp(500);
	});