Menu Responsivo Dropdown - CSS3/Javascript

Meu site está trabalhando com um menu responsivo, e a ideia é adicionar um dropdown para alguns itens do menu. Com o código que fiz até agora, o menu funciona, mas todas as LI são carregadas, e não apenas as que eu quero.. Gostaria da ajuda para fazer com que os <ul> dentro dos <li> só aparecessem caso eu clicasse.. HTML:

<div class="rmm"> <ul> <li><a href='#link'>link</a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <?php while($row = mysqli_fetch_array($sqlDois)) {?> <li> <a href="link.php?gid=<?php echo $row['grupo_id'].?>"> <?php echo $row['grupo_orixas'].?> </a> </li> <?php }?> </ul> </li> <li><a href='#link'>linklink</a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <li><a href="link.php">linklink</a></li> <li><a href="link.php">link</a></li> <li><a href="link.php">link</a></li> <li><a href="link.php">link</a></li> </ul> </li> <li><a href='link.php'>link</a></li> <li><a href='#link'>Aprendizado</a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <li><a href="textos.php">Textos</a></li> <li><a href="dicionario.php">Dicionario</a></li> </ul> </li> <li><a href='fotos.php'>Fotos</a></li> <li><a href='link.php'>link</a></li> <li><a href='#link'>Pontos link</a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <?php while($row = mysqli_fetch_array($sql)) {?> <li> <a href="pontos.php?gid=<?php echo $row['grupo_id'].?>"> <?php echo $row['grupo_id'].?> </a> </li> <?php }?> </ul> </li> </ul>

Segue o CSS

.rmm { display:none. position:relative. width:100%. padding:0px. text-align: center. line-height:19px!important. padding-bottom:3px. }

.rmm * {

 -webkit-tap-highlight-color:transparent!important. font-family:Arial. }

.rmm a {

 color:white. text-decoration:none. }

.rmm.rmm-main-list,.rmm.rmm-main-list li {

 margin:0px. padding:0px. }

.rmm ul {

 display:block. width:auto!important. margin:0 auto!important. overflow:hidden. list-style:none. }

/ sublevel menu - in construction /.rmm ul li ul,.rmm ul li ul li,.rmm ul li ul li a {

 display:block!important. height:100%!important. width:100%!important. }

/ /.rmm.rmm-main-list li {

 display:inline. padding:padding:0px. margin:0px!important. }.rmm-toggled { display:none. width:100%. position:relative. overflow:hidden. }

.rmm-button:hover {

 cursor:pointer. }

.rmm.rmm-toggled ul {

 display:none. margin:0px!important. padding:0px!important. }

.rmm.rmm-toggled ul li {

 display:block. margin:0 auto!important. }

/ GRAPHITE STYLE /.rmm.graphite.rmm-main-list li a {

 display:inline-block. padding:8px 30px 8px 30px. margin:0px -3px 0px -3px. font-size:15px. text-shadow:1px 1px 1px #333333. background-color:#444444. border-left:1px solid #555555. background-image:url('../rmm-img/graphite-menu-bg.png'). background-repeat:repeat-x. }

.rmm.graphite.rmm-main-list li a:hover {

 background-image:url('../rmm-img/graphite-menu-bg-hover.png'). }

.rmm.graphite.rmm-main-list li:first-child a {

-webkit-border-top-left-radius: 6px. -webkit-border-bottom-left-radius: 6px. -moz-border-radius-topleft: 6px. -moz-border-radius-bottomleft: 6px. border-top-left-radius: 6px. border-bottom-left-radius: 6px. }

.rmm.graphite.rmm-main-list li:last-child a {

-webkit-border-top-right-radius: 6px. -webkit-border-bottom-right-radius: 6px. -moz-border-radius-topright: 6px. -moz-border-radius-bottomright: 6px. border-top-right-radius: 6px. border-bottom-right-radius: 6px. }

.rmm.graphite.rmm-toggled {

 width:100%. background-color:#0260a9. min-height:36px. }

.rmm.graphite.rmm-toggled-controls {

 display:block. height:36px. color:white. text-align:left. position:relative. background-image:url('../rmm-img/graphite-menu-bg.png'). background-repeat:repeat-x. }

.rmm.graphite.rmm-toggled-title {

 position:relative. top:9px. left:15px. font-size:16px. color:white. text-shadow:1px 1px 1px black. }

.rmm.graphite.rmm-button {

 display:block. position:absolute. right:15px. top:8px. }

.rmm.graphite.rmm-button span {

 display:block. margin-top:4px. height:2px. background:white. width:24px. }

.rmm.graphite.rmm-toggled ul li a {

 display:block. width:100%. background-color:#0260a9. text-align:center. padding:10px 0px 10px 0px. border-top:1px solid white. }

/ borda no primeiro LI menu mobile css /.rmm.primeiroLiMenuMobile {

 border-top:1px solid white. }

.rmm.graphite.rmm-toggled ul li a:active {

 background-color:#07a5f2. border-bottom:1px solid #444444. border-top:1px solid #444444. }

/ SAPPHIRE STYLE /.rmm.sapphire.rmm-main-list li a {

 display:inline-block. padding:8px 30px 8px 30px. margin:0px -3px 0px -3px. font-size:15px. background-color:#537b9f. border-left:1px solid #3e587b. background-image:url('../rmm-img/sapphire-menu-bg.png'). background-repeat:repeat-x. }

.rmm.sapphire.rmm-main-list li a:hover {

 background:#3e597b. }

.rmm.sapphire.rmm-main-list li:first-child a {

-webkit-border-top-left-radius: 5px. -webkit-border-bottom-left-radius: 5px. -moz-border-radius-topleft: 5px. -moz-border-radius-bottomleft: 5px. border-top-left-radius: 5px. border-bottom-left-radius: 5px. }

.rmm.sapphire.rmm-main-list li:last-child a {

 -webkit-border-top-right-radius: 5px. -webkit-border-bottom-right-radius: 5px. -moz-border-radius-topright: 5px. -moz-border-radius-bottomright: 5px. border-top-right-radius: 5px. border-bottom-right-radius: 5px. }

.rmm.sapphire.rmm-toggled {

 width:100%. background-color:#537b9f. min-height:36px. }

.rmm.sapphire.rmm-toggled-controls {

 display:block. height:36px. color:white. text-align:left. position:relative. background-image:url('../rmm-img/sapphire-menu-bg.png'). background-repeat:repeat-x. }

.rmm.sapphire.rmm-toggled-title {

 position:relative. top:9px. left:15px. font-size:16px. color:white. }

.rmm.sapphire.rmm-button {

 display:block. position:absolute. right:9px. top:7px. width:20px. padding:0px 7px 0px 7px. border:1px solid #3e587b. background-image:url('../rmm-img/sapphire-menu-bg.png'). background-position:top. }

.rmm.sapphire.rmm-button span {

 display:block. margin:4px 0px 4px 0px. height:2px. background:white. width:20px. }

.rmm.sapphire.rmm-toggled ul li a {

 display:block. width:100%. background-color:#537698. text-align:center. padding:10px 0px 10px 0px. border-top:1px solid white. }

.rmm.sapphire.rmm-toggled ul li a:active {

 background-color:#3c5779. border-bottom:1px solid #3c5779. border-top:1px solid #3c5779. }

.rmm.sapphire.rmm-toggled ul li:first-child a {

 border-top:1px solid #3c5779!important. } @MEDIA screen and (min-width: 0px) and (max-width:976px)

{

.rmm { display:block. }
}

- Segue o JAVASCRIPT (de terceiros):

function responsiveMobileMenu() { $('.rmm').each(function() { $(this).children('ul').addClass('rmm-main-list'). // mark main menu list var $style = $(this).attr('data-menu-style'). // get menu style if ( typeof $style == 'undefined' || $style == false ) { $(this).addClass('graphite'). // set graphite style if style is not defined } else { $(this).addClass($style). } /* width of menu list (non-toggled) */ var $width = 0. $(this).find('ul li').each(function() { $width += $(this).outerWidth(). }). // if modern browser if ($.support.leadingWhitespace) { $(this).css('max-width', $width*1.05+'px'). } // else { $(this).css('width', $width*1.05+'px'). } }). }
function getMobileMenu() { /* build toggled dropdown menu list */ $('.rmm').each(function() { var menutitle = $(this).attr("data-menu-title"). if ( menutitle == "" ) { menutitle = "Menu". } else if ( menutitle == undefined ) { menutitle = "Menu". } var $menulist = $(this).children('.rmm-main-list').html(). var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>". $(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>"). }). }
function adaptMenu() { /* toggle menu on resize */ $('.rmm').each(function() { var $width = $(this).css('max-width'). $width = $width.replace('px', ''). if ( $(this).parent().width() < $width*1.05 ) { $(this).children('.rmm-main-list').hide(0). $(this).children('.rmm-toggled').show(0). } else { $(this).children('.rmm-main-list').show(0). $(this).children('.rmm-toggled').hide(0). } }). }
$(function() { responsiveMobileMenu(). getMobileMenu(). adaptMenu(). /* slide down mobile menu on click */ $('.rmm-toggled,.rmm-toggled.rmm-button').click(function(){ if ( $(this).is(".rmm-closed")) { $(this).find('ul').stop().show(300). $(this).removeClass("rmm-closed"). } else { $(this).find('ul').stop().hide(300). $(this).addClass("rmm-closed"). } }). }). /* hide mobile menu on resize */
$(window).resize(function() { adaptMenu(). }). 

Obs.: Removi os espaços dos códigos para que não ficasse tão cumprido. Como já dito, gostaria que os <ul> e seus respectivos <li> só aparecem quando eu clicasse sobre tal <li> Ex:

<ul> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a> <ul> <li><a href="#">SUBMENULINK</a></li> <li><a href="#">SUBMENULINK2</a></li> </ul> </li>
</ul>

Conto com a ajuda de vocês. Desde já, agradeço.