JSFiddle - React, Tailwind, and code Playground

by BeNdErR

HTML

<div class="gfloris-container">
<ul class="gfloris-nav">
  <li><a href="/products">TUTTI</a></li>
  
  <!-- INIZIO menù bijoux -->
  <li><a href="#">BIJOUX</a>
  <ul class="gfloris-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>
  <!-- FINE menù bijoux -->
  
  <!-- INIZIO menù ceramica -->
  <li><a href="#">CERAMICA</a>
  <ul class="gfloris-child">
        <li><a href="#">PIATTI<span class="expand">»</span></a>
    <ul class="gfloris-child">
      <li><a href="catgory/piatti-piccoli">PIATTI PICCOLI</a></li>
      <li><a href="catgory/piatti-medi">PIATTI MEDI</a></li>
      <li><a href="catgory/piatti-grandi">PIATTI GRANDI</a></li>
      <li><a href="catgory/portatorte">PORTATORTE</a></li>
    </ul></li>
    
        <li><a href="#">TAZZE<span class="expand">»</span></a>
    <ul class="gfloris-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><a href="#">PER LA CASA<span class="expand">»</span></a>
       <ul class="gfloris-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><a href="/category/shorts">IN CUCINA<span class="expand">»</span></a>
        <ul class="gfloris-child">
          <li><a href="/category/mattonelle-sottomoka">MATTONELLE SOTTOMOKA</a></li>
      <li><a href="/category/mattonelle-sottopentola">MATTONELLE SOTTOPENTOLA</a></li>
     ...

CSS

.gfloris-container .gfloris-nav {
  padding: 0;
  list-style: none;
  background: white;
  text-align: center;
}

.gfloris-container .gfloris-nav li {
  float: left;
  display: block;
  width: 20%;
  position: relative;
  z-index: 500;
  margin: 0;
  text-align: center;
}

/* this is the main (parent) menu */
.gfloris-container .gfloris-nav li a {
  display: block;
  font-size: 16px;
  height: 23px;
  text-decoration: none;
  text-align: center;
  background: #fff;
}

/* !!!! submenu, it's hidden by 
default */
.gfloris-container .gfloris-nav ul {
  position: absolute;
  background: white;
  left: 100;
  display: none;
  width: 100%;
  margin: 0 auto;
 
  padding: 0 0 3px 0;
  list-style: none;
  border: 3px solid black;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
}

.gfloris-container .gfloris-nav ul li {
  width: 100%;
  float: left;
  text-align: center;
  
}

/* display block will make the link fill the whole area of LI */
.gfloris-container .gfloris-nav ul a {
  display: block;
  height: auto;
  padding: 8px 5px;
  background: white;
  text-align: center;
}

/* vecchio css */

.gfloris-container .gfloris-child {
  display: none;
}

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

.gfloris-container .gfloris-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;
}

JavaScript

$(document).ready(function () {
     
    $('.gfloris-nav li').hover(
        function () {
            //show its submenu
            $('ul', this).first().slideDown(100);
 
        },
        function () {
            //hide its submenu
            $('ul', this).slideUp(1);        
        }
    );
     
});


// var j for bigcartel

//     j(document).ready(function () {
     
   //     j('#nav li').hover(
        //    function () {
            //show its submenu
           //    j('ul', this).slideDown(1);
 
      //  },
   //     function () {
            //hide its submenu
  //          j('ul', this).slideUp(1);        
  //      }
 //   );
     
//    });