Hello,

I am using DNN Standard Menu for the desktop version of a website, and am using Mobile Menu for mobile browsers. I would like to be able to have items in the menu with the "haschildMobile" class to be able to click to drop down to show the children pages rather then just having them all open at once. I am trying to use CSS and jQuery to make this happen, but am having problems.

Any ideas?

#dnnMobileMenu .mobileTopLevel { 
position: relative; 
height: auto; 
margin: 0; 
padding: 0; 
}
#dnnMobileMenu .mobileTopLevel li a {
display: inline-block;
color: #999;
font-size: 13px;
}
#dnnMobileMenu .mobileTopLevel li a span { 
display: inline-block; 
height: 42px; 
line-height: 42px; 
margin: 0; 
padding: 0 15px; 
text-transform: uppercase; 
}
#dnnMobileMenu .mobileTopLevel li { 
position: relative; 
list-style-type: none; 
float: none; 
width: 100%; 
border-top: 1px solid #e1e1e1; 
}
li.haschildMobile:after { 
padding-left: 4px; 
content: ' v'; 
}
#dnnMobileMenu .mobileSubLevel li { 
display: none; 
}

$(function(){
    $('.haschildMobile').click(function() {
      $(this).('.mobileSubLevel').toggle();
    $('.mobileSubLevel').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    $('html').click(function() {
      $('.mobileSubLevel').hide();
    });
})

<div id="dnnMobileMenu">
<ul class="mobileTopLevel">

<li class="itemMobile firstMobile breadcrumbMobile selectedMobile">

<a href="#"><span>Home</span></a>

</li>

<li class="itemMobile haschildMobile">

<a href="#"><span>Dropdown Area</span></a>

<div class="mobileSubLevel">
<ul>

<li class="itemMobile firstMobile">

<a href="#"><span>Item 1</span></a>

</li>

 <li class="itemMobile">

<a href="#"><span>Item 2</span></a>

</li>

<li class="itemMobile">

<a href="#"><span>Item 3</span></a>
</li>
</ul>
</div>
</ul>

</div>

Thank you in advance for your help.