JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

	<nav id="menu">

  <label for="tm" id="toggle-menu">MENU<span class="drop-icon">▾</span></label>

  <input type="checkbox" id="tm">

  <ul class="main-menu cf">
    <li><a href="index.php?option=com_content&view=article&id=1&Itemid=101&lang=it">Il Territorio</a></li>
    <li><a href="index.php?option=com_content&view=article&id=2&Itemid=103&lang=it">I Percorsi<!--<span class="drop-icon">▾</span>--><label title="Toggle Drop-down" class="drop-icon" for="sm0">▾</label></a>
      
      <input type="checkbox" id="sm0">

      <ul class="sub-menu"><!-- dubbio per questo sm2 copiato -->
        <li><a href="index.php?option=com_content&view=article&id=7&Itemid=114&lang=it">Percorsi per mountain bike<!--<span class="drop-icon">▸</span>--><label title="Toggle Drop-down" class="drop-icon" for="sm1">▾</label></a>

          <input type="checkbox" id="sm1">

          <ul class="sub-menu">
            <li class="bkg1mtb"><a href="index.php?option=com_content&view=article&id=215&Itemid=116&lang=it"><img src="images/swmenupro/ico-pmtb1.png"/>Percorso 1</a></li>
			<li class="bkg1mtb"><a href="index.php?option=com_content&view=article&id=216&Itemid=343&lang=it"><img src="images/swmenupro/ico-pmtb1.png"/>Percorso 1 Anello "Gli Orti"</a></li>
			<li class="bkg1mtb"><a href="index.php?option=com_content&view=article&id=217&Itemid=344&lang=it"><img src="images/swmenupro/ico-pmtb1.png"/>Percorso 1 Anello "Gambassi terme"</a></li>
            
            <li class="bkg2mtb"><a href="index.php?option=com_content&view=article&id=214&Itemid=117&lang=it"><img src="images/swmenupro/ico-pmtb2.png"/>Percorso 2</a></li>
            
            <li class="bkg3mtb"><a href="index.php?option=com_content&view=article&id=213&Itemid=118&lang=it"><img src="images/swmenupro/ico-pmtb3.png"/>Percorso 3</a></li>
            
            <li class="bkg4mtb"><a href="index.php?option=com_content&view=article&id=210&Itemid=119&lang=it"><img...

CSS

/********************************************************** Impostazioni per devices con risoluzione SUPERIORE a 979px!!!!!!!   */
.cf:after {
  content: "";
  display: table;
  clear: both;
}


.wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


@media only screen and (min-width: 979px) {
 #menu {
 background-color: #F60;
   /*height:80px;*/
}
 
  #menu .main-menu {
  display: block;}

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }



/********************************************** Menu TOP */
ul.main-menu li a {
  /*padding: 1em 1.5em;*/
    padding: 10px 13px 10px 13px;
	height:30px;
	font:bold normal 0.9em 'PT Serif', serif;
	text-transform:uppercase;
		text-align:center;
	margin:auto;
   background-color:#900;
}


ul.sub-menu li a{
  /*padding: 1em 1.5em;*/
    padding: 10px 20px 10px 10px;
	font:normal normal 0.8em 'PT Serif', serif;
	text-transform:none;
	text-align:left;
	height:25px;
}

ul.sub-menu li img{
	vertical-align:middle;
}
ul.sub-menu li li a{
    padding: 5px 10px 15px 10px;
	font:normal normal 0.8em 'PT Serif', serif;
	text-transform:none;
	text-align:left;
	height:20px;
}

#menu .sub-menu a:hover {
  color: #FFF;
  background-color:#999;/* Grigio chiaro */
}







  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
 }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
	/*border:1px solid black;*/
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    /*width: 12em;*/
	width:auto;
    z-index: 3000;
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

 #menu .sub-menu .drop-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1em;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
 ...