Menu déroulant au "clic"

Bonjour,

j'ai adapté un menu déroulant qui fonctionne bien tant qu'il est sur une page internet via un ordinateur.

on m'a fait remarquée, qu'il n'est pas fractionnable pour les tablettes ou mobiles.

car lorsque on "clic" sur le menu, le menu ne se déroule pas et on remonte directement en haut de la page.

donc, j'aimerai savoir où dois-je modifier mon script ou texte pour que l'on puisse cliquer sur le menu pour qu'il se déroule.

#menu, #menu ul
 {
  padding:0;
  margin:0;
  list-style:none;
  text-align:center;
  z-index: 1000;
 }
 
#menu li
 {
  display:inline-block;
  position:relative; /* Crée un contexte de positionnement pour les sous-listes */
  border-radius:8px 8px 0 0;
 } 
 
#menu ul li
 {
  display:inherit;
  border-radius:0;
 } 
 
#menu ul li:hover
 {
  border-radius:0;
 }

#menu ul li:last-child
 {
  border-radius:0 0 8px 8px;
 }

#menu ul
 {
  position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
  max-height: 0;
  left: 0; /* FIX IE7 : pour que le sous-menu s'aligne avec son conteneur */
  right: 0;
  overflow: hidden;
  -moz-transition: .8s all .3s;
  -webkit-transition: .8s all .3s;
  transition: .8s all .3s;
 }

/* donne la longueur du déroulant, diminuer ou augmenter le 30em selon le nombre de liens */
#menu li:hover ul
 {
  max-height:30em;
 } 
 
/* background des liens menus */

/*menu 1
couleur dégradée */ 

#menu li:first-child
 {
  background-color: #81BEF7;
  background-image:-webkit-linear-gradient(top, #81BEF7 0%, #58D3F7 100%);
  background-image:linear-gradient(to bottom, #81BEF7 0%, #58D3F7 100%);
 }

/*menu 2 */
#menu li:nth-child(2) 
 {
  background-color: #CC2EFA;
  background-image: -webkit-linear-gradient(top, #CC2EFA 0%, #663399 100%);
  background-image:linear-gradient(to bottom, #CC2EFA 0%, #663399 100%);
 }

/* menu 3 */
#menu li:nth-child(3)
 {
  background-color: #009999;
  background-image:-webkit-linear-gradient(top, #009999 0%, #00CC99 100%);
  background-image:linear-gradient(to bottom, #009999 0%, #00CC99 100%);
 }

/* menu 4 (couleur rouge - non utilisé actuellement, fichier non téléchargé sur le FTP*/
#menu li:nth-child(4)
 {
  background-color: #FF3300;
  background-image:-webkit-linear-gradient(top, #FF3300 0%, #FF99CC 100%);
  background-image:linear-gradient(to bottom, #FF3300 0%, #FF99CC 100%);
 }


/* menu 5 c-a-d le dernier menu */
#menu li:last-child
 {
  background-color: #FF9966;
  background-image:-webkit-linear-gradient(top, #FF9966 0%, #CC9999 100%);
  background-image:linear-gradient(to bottom, #FF9966 0%, #CC9999 100%);
 }

/* background des liens sous menus = déroulant */
#menu li:first-child li
 {
  background:#58D3F7;
 }

#menu li:nth-child(2) li
 {
  background:#663399;
 }

#menu li:nth-child(3) li
 {
  background:#00CC99;
 }
 
#menu li:nth-child(4) li
 {
  background:#FF99CC;
 }
 
#menu li:last-child li
 {
  background:#CC9999;
 } 
 
/* background des liens menus et sous menus au survol */

#menu
 li:first-child:hover, #menu li:first-child li:hover
 {
  background:#81BEF7;
 }

#menu
 li:nth-child(2):hover, #menu li:nth-child(2) li:hover
 {
  background:#CC2EFA;
 }

#menu
 li:nth-child(3):hover, #menu li:nth-child(3) li:hover
 {
  background:#009999;
 }
 
#menu
 li:nth-child(4):hover, #menu li:nth-child(4) li:hover
 {
  background:#FF3300;
 }
 
#menu li:last-child:hover, #menu li:last-child li:hover
 {
  background:#FF9966;
 } 
 
/* les a href */
#menu a
 {
  text-decoration:none;
  display:block;
  padding:8px 32px;
  color:#fff;
  font-family:arial;
 }

#menu ul a
 {
  padding:8px 0;
 }

#menu li:hover li a
 {
  color:#fff;
  text-transform:inherit;
 }

#menu li:hover a, #menu li li:hover a
 {
  color:#000;
 }

dois-je rajouter un fichier function.js où je dois spécifier un onclick mais là, franchement, je ne sais pas le faire.
j'ai beau chercher et tenter de comprendre tous les menus créés mais je n'y arrive pas...

merci de votre aide, en espérant que je sois au bon endroit.