JSFiddle - React, Tailwind, and code Playground

by Serg Sagan

HTML

<div id="pagemenucontainer" style=" background-color: #FFF; padding-bottom: 1px; margin-bottom: 10px;">

<div class="container">
<div id="menu">
  <ul>
    <li><a href="/">Главная</a></li>
    <li class="mli"><a href="#">Квартиры</a>
      <div class="mli_toggle" style="margin-left: -12px;"> 
        <ul id="mli_open">
            <li><a href="#">1-комнатные (80)</a></li>
            <li><a href="#">2-комнатные (90)</a></li>
            <li><a href="#">3-комнатные (90)</a></li>
            <li><a href="#">4-комнатные (28)</a></li>
            <li><a href="#">5-комнатные (0)</a></li>            
        </ul>
      </div>
    </li>
    <li class="mli"><a href="#">Центр</a></li>
    <li class="mli"><a href="#">Майдан</a></li>
    <li class="mli"><a href="#">Крещатик</a></li>
    <li class="mli"><a href="#">Бесарабка</a></li>
    <li class="mli"><a href="#">Пентхаус</a></li>
    <li class="mli"><a href="#">VIP</a>
      <div class="mli_toggle" style="margin-left: -12px;"> 
          <ul id="mli_open">
            <li><a href="#">VIP (46)</a></li>
            <li><a href="#">Люкс (67)</a></li>          
          </ul>
      </div>
    </li>
    <li class="mli"><a href="#">Коттеджи</a></li>
    <li><a href="#">Инфо</a></li>
  </ul>
</div>
</div>
</div>

CSS

/* menu */
#menu {
	height: 37px;
	padding: 0px 5px;
	margin-bottom: 7px;
	margin-left: 25px;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu > ul > li {
	position: relative;
	float: left;
	z-index: 20;
	padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
	font-size: 16px;
	color: #2c3e50;
	border-right: 1px solid #2c3e50;
	text-transform: uppercase;
	display: block;
	padding: 6px 15px;
	margin-bottom: 5px;
	z-index: 6;
	position: relative;
}
#menu > ul > li:last-child > a, #menu > ul > li:last-child:hover > a {
	border-right: none;
}
#menu > ul > li:hover > a {
	color: #e15153;
	text-decoration: underline;
	border-right: 1px solid #e15153;
}
#menu > ul > li > div {
	display: none;
	background: #FFFFFF;
	position: absolute;
	z-index: 5;
	padding: 5px;
	border: 1px solid #000000;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-khtml-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	background: url('../image/menu.png');
}
/*#menu > ul > li:hover > div {
	display: table;
}*/
#menu > ul > li > div > ul {
	display: table-cell;
}
#menu > ul > li ul + ul {
	padding-left: 20px;
}
#menu > ul > li ul > li > a {
	text-decoration: none;
	padding: 4px;
	color: #FFFFFF;
	display: block;
	white-space: nowrap;
	min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
	background: #000000;
}
#menu > ul > li > div > ul > li > a {
	color: #FFFFFF;
	padding-left: 10px;
}
#topMenu {
	display: none;
}
@media  screen and (max-width: 1080px) {
    #menu > ul > li ul > li > a {
    	padding-left: 10px !important;
    }
}
  #menu {
    width: 90%;
    margin: 0 auto;
  }
  #menu > ul > li > a {
    font-size: 14px;
  }

@media  screen and (max-width: 720px) {
	.proscroller {
		margin-left: 4% !important;
		width: 44% !important;
	}
		.oc-style + .proscroller {
		  margin-left: 2% !important;
	} 
/* <<-accordion */
	#topMenu {
		display: block;
		height: 50px;
		width: 100%;
		background:...

JavaScript

$( document ).ready(function() {
		$("#topMenu").click(function(){
			$("#pagemenucontainer").slideToggle(500);
		});

		var count = 0;
	$("#mli_open").parent(".mli_toggle").parent(".mli").click(function(){
			count += 1;

		if (count==1) {
			//$(this).children("a").removeAttr("href");
		}
		else {
			//$(this).children("a").attr("href", "<?php echo $category['href']; ?>");
			//$(this).children("a").attr("href", "<?php if($category){ echo $category['href'];} ?>");
		}
			// $(".mli>a").removeAttr("href");
			//$('.mli>.mli_toggle').slideToggle(500);
			//$(this).addClass("mli_a");
		});
	});

	$( document ).ready(function() {
		$( "li.mli" ).click(function(e) {
			$(this).children('div').toggle();
			e.stopPropagation();
		});
	});