/* reset stili */

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* lista orizzontale */

#menu li {
  display: inline-block;
  position: relative; /* relative */
}

/* menu */

#menu {
  width: 100%;
  background-color: black;
  background: -webkit-linear-gradient(#444, #111); /* safari an chrome*/
  background: -moz-linear-gradient(#444, #111); /* firefox*/
  background: -o-linear-gradient(#444, #111); /* opera */
  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: 60px;*/
  width: auto;
  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;
  z-index:100; /*aggiunto da me non ha effetto */
}

/* sub menu */

#menu li .hidden {
  display: block;
  position: absolute;
  top: 100px;
  left: 0;
  background-color: white;
  opacity: 0;
  filter:Alpha(opacity=0); /* IE8 and earlier */
  visibility: hidden;
}

/* 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;
  filter:Alpha(opacity=100); /* IE8 and earlier */
  -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;
}

/* diamo uno stile al pulsante del menu e nascondiamolo */

.showMenu {
  padding: 10px 0;
  color: black;
  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;
}