JSFiddle - React, Tailwind, and code Playground

by BeNdErR

HTML

<div id="gfloris-container">

<ul id="menu">
  <li class="parent"><a href="/products">TUTTI</a>
	<li class="parent"><a href="#">BIJOUX</a>
	<ul class="child">
		<li><a href="/category/anelli">ANELLI</a></li>
		<li><a href="/category/collane">COLLANE</a></li>
		<li><a href="/category/spille">SPILLE</a></li>
	</ul>
	</li>
	<li class="parent"><a href="#">CERAMICA</a>
	<ul class="child">			
		<li class="parent"><a href="#">PIATTI<span class="expand">»</span></a>
			<ul class="child">
			<li><a href="/category/piatti-piccoli">PIATTI PICCOLI</a></li>
			<li><a href="/category/piatti-medi">PIATTI MEDI</a></li>
      <li><a href="/category/piatti-grandi">PIATTI GRANDI</a></li>
			<li><a href="/category/portatorte">PORTATORTE</a></li>
			</ul>
		</li>
    <li class="parent"><a href="#">TAZZE<span class="expand">»</span></a>
			<ul class="child">
			<li><a href="/category/tazzine-caffe">TAZZINE CAFFÈ</a></li>
			<li><a href="/category/tazze-te-piatto">TAZZE TÈ</a></li>
      <li><a href="/category/tazze-mug">TAZZE MUG</a></li>
			<li><a href="/category/tazza-caffellatte-piatto">TAZZE CAFFELLATTE</a></li>
			</ul>
		</li>
    <li class="parent"><a href="#">PER LA CASA<span class="expand">»</span></a>
			<ul class="child">
			<li><a href="/category/cache-pot">CACHEPOT</a></li>
      <li><a href="/category/portagioie">PORTAGIOIE</a></li>
      <li><a href="/category/portaincenso">PORTAINCENSO</a></li>
      <li><a href="/category/orologi">OROLOGI</a></li>
      <li><a href="/category/per-gli-amici-animals">PER GLI AMICI ANIMALS</a></li>
			</ul>
		</li>
    <li class="parent"><a href="#">IN CUCINA<span class="expand">»</span></a>
			<ul class="child">
			<li><a href="/category/mattonelle-sottomoka">MATTONELLE SOTTOMOKA</a></li>
      <li><a href="/category/mattonelle-sottopentola">MATTONELLE SOTTOPENTOLA</a></li>
      <li><a href="/category/posamestolo">POSAMESTOLO</a></li>
      <li><a href="/category/sale-e-pepe">SALE E PEPE</a></li>
			</ul>
		</li>
	</ul>
	</li>
	<li...

CSS

@media only screen and (max-width: 800px){
  #gfloris-container .parent {
    width: 100%;
    text-align: center;
  }
  
  /*#gfloris-container .parent:hover>ul{
    width: 100%;
    text-align: center;
    display: block;
  }*/
}

#gfloris-container .parent {
    display: block;
    position: relative;
    float: left;
    line-height: 30px;
}
#gfloris-container .parent a {
  margin: 10px;
  text-decoration: none;
}

#gfloris-container .parent:hover>ul {
  /*display: block;
  position: absolute;
  z-index: 9999;*/
}

#gfloris-container .child {
  display: none;
  background-color: white;
}

#gfloris-container .child li {
  line-height: 30px;
  border: #CCC 1px solid;
  width: 100%;
}

#gfloris-container .child li a {
  color: #000000;
}

#gfloris-container ul {
  list-style: none;
  margin: 0;
  padding: 0px;
  min-width: 10em;
}

#gfloris-container ul ul ul {
  left: 100%;
  top: 0;
  margin-left: 1px;
}


#gfloris-container .expand {
  font-size: 12px;
  float: right;
  margin-right: 5px;
}

#gfloris-container ul li:not(:last-child)::after {
    content: none !important;
}

JavaScript

$("#gfloris-container").off("click", "li.parent").on("click", "li.parent", function(e) {
	e.stopPropagation();
  e.preventDefault();
	var $this = this;
  console.log($this);
	$($this).css("background", "red");
  setTimeout(function() {
  	$($this).css("background", "");
  }, 1000);
  $("#gfloris-container ul.child.gf-active").each(function() {
  	var parent = $(this).closest("ul.child.gf-active");
    debugger
    if ($(parent).length == 0)
  		$(this).removeClass("gf-active").hide();
  });
  $(this).find("> ul").addClass("gf-active").show();
});