JSFiddle - React, Tailwind, and code Playground

by Filippo Bracci

HTML

<div class="wrapper">

	<nav id="menu">

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

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

  <ul class="main-menu cf">
    <li><a href="index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=137&amp;lang=en">Il Territorio</a></li>
    <li><a href="index.php?option=com_content&amp;view=article&amp;id=35&amp;Itemid=138&amp;lang=en">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&amp;view=article&amp;id=39&amp;Itemid=139&amp;lang=en">Percorsi per mountain bike<!--<span class="drop-icon">▸</span>--><label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label></a>

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

          <ul class="sub-menu">
            <li><a href="index.php?option=com_content&amp;view=article&amp;id=40&amp;Itemid=140&amp;lang=en"><img src="images/swmenupro/ico-pmtb1.png"/>Percorso 1 Anello "Gambassi terme"</a></li>
			<li><a href="index.php?option=com_content&amp;view=article&amp;id=223&amp;Itemid=350&amp;lang=en">Track 2</a></li>
			<li><a href="index.php?option=com_content&amp;view=article&amp;id=44&amp;Itemid=142&amp;lang=en">Track 3</a></li>
          </ul>

        </li>
        
        
        
        <li><a href="#">Percorsi per bicicletta da strada<!--<span class="drop-icon">▸</span>--><label title="Toggle Drop-down" class="drop-icon" for="sm2">▾</label></a>

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

          <ul class="sub-menu">
            <li><a href="#">Track 1</a></li>
            <li><a href="#">Track 1</a></li>
            <li><a href="#">Track 1</a></li>
            <li><a href="#">Track 1</a></li>
            <li><a href="#">Track 1</a></li>
          </ul>

        </li>
        
        
        
    ...

CSS

/* CSS Document */

.cf:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * CONTENT WRAPPER
 */
body {

  background-color: #459;
}


.wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #369;
}



/*********************************************/

#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
	/*border:1px solid #FF3; si può omettere */
  /*border-style: solid;
  border-color: rgba(0, 0, 0, .05);
  font-family: Arial, Helvetica, sans-serif;*/
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: #444;
  border-width: 1px 1px 0;
  margin: 0 1em;
  white-space:nowrap;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
  text-decoration:none;
}

#menu {
  /*background-color: #900;*/
  /*height:80px;*/
}




#toggle-menu {
  background: #333;
}

#toggle-menu, 
#menu a {
  /*padding: 1em 1.5em;*/
}

ul.main-menu li a {
  /*padding: 1em 1.5em;*/
    padding: 53px 20px 10px 20px;
	height:70px;
	font:normal normal 1.2em "Open Sans Condensed", sans-serif;
	text-transform:uppercase;
}


ul.sub-menu li a{
  /*padding: 1em 1.5em;*/
    padding: 10px 20px 10px 7px;
	height:20px;
	font:normal normal 1.0em "Open Sans Condensed", sans-serif;
	text-transform:none;
	text-align:left;
}




ul.sub-menu li li a{
  /*padding: 1em 1.5em;*/
    padding: 5px 20px 5px 7px;
	height:30px;
	font:normal normal 1.0em "Open Sans Condensed", sans-serif;
	text-transform:none;
	text-align:left;
}

ul.sub-menu li img{
	vertical-align:middle;
}
ul.sub-menu ul li ul li{
    padding: 0;
	font:normal normal 1.0em "Open Sans Condensed",...