<div>
 <label for="showMenu" class="showMenu">
 <i class="fa fa-align-justify fa-lg"></i>
 Menù
</label>
<input type="checkbox" id="showMenu" role="button">
 <ul id="menu">
 <li><a href="http://">Home</a></li>
 <li><a href="http://">LyX</a></li>
 <li><a href="http://">Tutorial</a>
 <ul class="hidden">
 <li><a href="http://">Tutorial 1</a></li>
 <li><a href="http://">Tutorial 2</a></li>
 <li><a href="http://">Tutorial 3</a></li>
 </ul>
 </li>
 <li><a href="http://">Guide LyX</a></li>
 <li><a href="http://">Modelli</a>
 <ul class="hidden">
 <li><a href="http://">Modello 1</a></li>
 <li><a href="http://">Modello 2</a></li>
 <li><a href="http://">Modello 3</a></li>
 <li><a href="http://">Modello 4</a></li>
 <li><a href="http://">Modello 5</a></li>
 </ul>
 </li>
 <li><a id="donate" href="http://">Contatti</a></li>
</ul>
</div>

<style type="text/css">


/* reset stili */

ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}

/* lista orizzontale */

#menu li {
 display: inline-block;
 position: relative;
}

/* menu */

#menu {
 width: 100%;
 background-color: black;
 background: -moz-linear-gradient(#444, #111); /* firefox*/
 background: linear-gradient(#444, #111);
 border: 1px solid #222;
 border-radius: 6px;
 box-shadow: 1px 1px 4px #777;
 text-align: center;
}

/* links */

li a {
 display: block;
 padding: 12px 20px;
 width: 150px;
 color: #999;
 text-transform: uppercase;
 font: bold 0.7em Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px #000;
 border-right: 1px solid #222;
 box-shadow: 1px 0 #444;
}

/* rimuoviamo il bordo e l'ombreggiatura dall'ultimo link del menu */

#donate {
 border: none;
 box-shadow: none;

}

/* links hover */

a:hover {
 color: #C8C8C8;
}
/* sub menu */

#menu li .hidden {
 display: block;
 position: absolute;
 top: 100px;
 left: 0;
 background-color: black;
 opacity: 0;
 visibility: hidden;
 z-index: 1000;
}

/* links sub menu */

#menu li .hidden li a {
 width: 100px;
 border-bottom: 1px solid #202020;
 border-right: none;
 box-shadow: none;
}
/* menu hover */

#menu li:hover .hidden {
 margin-top: -65px;
 opacity: 1;
 -webkit-transition: all 0.5s ease; /* safari and chrome /
 -moz-transition: all 0.5s ease; / firefox /
 -o-transition: all 0.5s ease; / opera */
 transition: all 0.5s ease;
 visibility: visible;
}
@media only screen and (max-width: 768px) {

#menu {
 background: none;
 border: none;
 border-radius: 0;

 box-shadow: none;
 text-align: center;
 display: none;

}

/* rendiamo gli elementi dei menu elementi di blocco */ 

ul li {
 display: block;
}

/* impostiamo la larghezza massima per gli elementi dei menu e i links */ 

ul li, ul li a {
 padding-right: 0;
 padding-left: 0;
 width: 100%;
}

#menu li .hidden li, #menu li .hidden li a {
 width: 100%;
}

/* rendiamo visibili gli elementi del sub menu solo al passaggio del mouse */ 

#menu li .hidden li {
 display: none;
}

#menu li:hover .hidden li {
 display: block;
} 

/* aumentiamo la grandezza dei links */ 

li a {
 font: bold 0.9em Arial, Helvetica;
} 

/* resettiamo la posizione degli elementi del menu */ 

#menu li {
 position: static;
} 

/* resettiamo la posizione del sub menu e lo rendiamo visibile */ 

#menu li .hidden {
 position: static;
 opacity: 1;
 visibility: visible;
}

/* rimuoviamo bordo e ombreggiatura dai links del menu */

#menu li a {
 border: none;
 box-shadow: none;

} 

/* nessuna animazione al passaggio del mouse */ 

#menu li:hover .hidden {
 margin: 0;
} 

/* rimuoviamo il bordo dai links del sub menu */ 

#menu li .hidden li a {
 border: none;
}

/diamo un colore di sfondo agli elementi del menu e del sub menu /

#menu li {
 background-color: black;
}

#menu li .hidden li {
 background-color: #003366;
} 

}

/* diamo uno stile al pulsante del menu e nascondiamolo */

.showMenu {
 padding: 10px 0;
 color: white;
 background: #0066FF;
 text-align: center;
 display: none;
}
/* nascondiamo il checkbox */

input[type=checkbox]{
 display: none;
}

/* mostriamo il menu quando il checkbox viene selezionato */

input[type=checkbox]:checked ~ #menu {
 display: block;
}
/* mostriamo il pulsante del menu */

.showMenu {
 display: block;
}

</style>