Bonsoir a tous  
 
je suis ce que l'on appel un gros noob en programmation du coup je venais vers vous pour savoir si quelqu'un pouvait m'aider  
 
je cherche a faire un menu déroulant sur plusieurs niveau  du style une rubrique jouet avec en sous rubrique une marque et encore une sous rubrique.
 
je suis sur le site blogger , actuellement mon code HTML/Java pour mon menu déroulant est le suivant et je cherche a ajouter a la rubrique Bali une sous rubrique avec les differentes villes que j'ai fait  
 
 
 
<a href="#menu" class="menubtn">MENU</a>
<nav id="menu" class="menu" role="navigation">
<ul>
<li class="parent"><a href="https://objectifworldtour.blogspot.com/">Accueil</a></li>
<li class="parent sousmenu"><a href="#">Asie</a>
  <ul class="sousrubrique">
<li><a href="http://objectifworldtour.blogspot.com/p/bali.html">Bali</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/hong-kong.html">Hong-Kong</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/japon.html">Japon</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/seoul.html">Séoul</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/singapour.html">Singapour</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/thailande.html">Thaïlande</a></li>
  </ul>
</li>
<li class="parent sousmenu"><a href="#">Europe</a>
  <ul class="sousrubrique">
<li><a href="http://objectifworldtour.blogspot.com/p/andalousie.html">Andalousie</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/udapest.html">Budapest</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/italie-sicile.html">Italie (Sicile)</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/crete-et-santorin.html">Crète et Santorin</a></li>
  </ul>
</li>
<li class="parent sousmenu"><a href="#">USA</a>
  <ul class="sousrubrique">
  <li><a href="http://objectifworldtour.blogspot.com/p/usa-cote-ouest.html">Circuit côte ouest</a></li>
<li><a href="http://objectifworldtour.blogspot.com/p/new-york.html">New-York</a></li>
                </ul>
</li>
<li class="parent"><a href="https://objectifworldtour.blogspot.com/p/contact_16.html">Contact</a></li>
</ul>
</nav>
 
<script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('body').addClass('js');
    var $menu = $('#menu'),
       $menulink = $('.menubtn'),
       $menuTrigger = $('.sousmenu > a');
   
  $menulink.click(function(e) {
   e.preventDefault();
   $menulink.toggleClass('select');
   $menu.toggleClass('select');
  });
   
  $menuTrigger.click(function(e) {
   e.preventDefault();
   var $this = $(this);
   $this.toggleClass('select').next('ul').toggleClass('select');
  });
   
  });
</script>
 
 
 
 
 
MON CODE CSS EST LE SUIVANT :  
 
 
.widget.ContactForm {display: none;}
/* MISE EN FORME GENERALE */
 
nav#menu.menu a {display:block;padding:1em;text-decoration:none;color:#000;border:none;}
nav#menu.menu a:hover {background:#FFE49F;}
.menubtn {display:none;}
nav#menu.menu ul,nav#menu.menu ul li {list-style-type:none;padding:0;margin:0;z-index:99;background:#FFF;}
nav#menu.menu > ul > li > a {text-transform:uppercase;}
 
/* AFFICHAGE SUR ECRAN > 501 PX DE LARGE */
 
@media screen and (min-width : 501px){
nav#menu.menu .parent {position:relative;}
nav#menu.menu > ul > li {display:inline-block;}
nav#menu.menu > ul {text-align:center;}
.sousrubrique{visibility:hidden;position:absolute;top:100%;min-width:160px;left:0;z-index:-1;background:#FFF;opacity:0;text-align:left;transform:translateY(-2em);transition:all .3s ease-in-out 0s,visibility 0s linear .3s,z-index 0s linear 10ms;-moz-box-shadow:3px 3px 5px 0 #656565;-webkit-box-shadow:3px 3px 5px 0 #656565;-o-box-shadow:3px 3px 5px 0 #656565;box-shadow:3px 3px 5px 0 #656565;filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=135, Strength=5)}
nav#menu.menu > ul > li > ul > li {float:none;}
nav#menu.menu ul,nav#menu.menu ul li {overflow:visible;}
nav#menu.menu ul li:hover .sousrubrique{visibility:visible;opacity:1;z-index:1;transform:translateY(0);transition-delay:0s,0s,.3s}
}
 
/* AFFICHAGE SUR PETIT ECRAN */
@media screen and (max-width : 500px){
a.menubtn {display: inline-block;position: relative;padding: 0.5em 1.9em;text-decoration:none;color:#000;margin-top: 1em;border-radius: 3px;border: 1px solid #CCC;background: #FFE49F;}
.menubtn:before{content: "";position: absolute;left: 0.5em;top: 0.75em;width: 1em;height: 0.15em;background: black;box-shadow: 0 0.35em 0 0 black,0 0.7em 0 0 black;}
nav#menu.menu ul,nav#menu.menu ul li {list-style-type:none;padding:0;margin:0;text-transform:uppercase;}
nav#menu.menu > ul {margin-top:10px;}
.js nav#menu.menu, .js nav#menu.menu > ul ul {overflow: hidden;max-height: 0;transition: all 0.3s ease-out;}
nav#menu.menu.select, .js nav#menu.menu > ul ul.select {max-height: 55em;}
nav#menu.menu li a {color: #000;display: block;padding: 0.8em;border-bottom: 1px solid #EEE;position: relative;}
nav#menu.menu li.sousmenu > a:after {content: '+';position: absolute;top: 0;right: 0;display: block;font-size: 1em;padding: 0.7em 0.5em;}
nav#menu.menu li.sousmenu > a.select:after {content: "-";padding: 0.7em 0.5em;}
nav#menu.menu li.sousmenu > ul li {padding-left:1em;text-transform:none;float:none;}  
nav#menu.menu ul,nav#menu.menu ul li {overflow:visible;}
nav#menu.menu > ul > li.parent {float:none;}
nav#menu.menu ul.sousrubrique,nav#menu.menu ul{border-bottom: 0;}
}
 
 
 
 
 
 
un grand merci d'avance a celui qui peu m'aider car j'y passe des heures mais je ne comprend rien et je tourne en rond