mobile navigation bar using jquery

i'm trying to design my first website, I've built my menu bar which has a couple of levels. everything works fine. now i want to make it mobile-friendly.

so i want to make the levels open up on click using jquery. i've managed to open to the first level but when i click on the second level i can't seem to open the third level...

here's the code:

HTML:

<span id="menu-trigger"> menu </span>
<ul id="nav">
<li><a href="index.html" >home</a></li>
<li><a href="#" >what is it?</a><span class="darrow">▼</span>
    <ul class="submenu">
        <li ><a href="aboutthesystem.html">about</a></li>
        <li><a href="systemobjective.html">objectives</a></li>
        <li><a href="systemimplementation.html">implementation</a></li>
    </ul>
</li>
<li ><a href="#" >5th grade</a><span class="darrow">▼</span>
    <ul class="submenu">
        <li><a href="#">geography</a><span class="larrow">&#9666;</span>
            <ul class="submenu2">
                <li ><a href="5thgradegeographyworkpage.html">work page</a></li>
                <li ><a href="5thgradegeographyexplenation.html">explenation</a></li>
                <li ><a href="5thgradegeographyexemples.html">exemples</a></li>
                <li ><a href="5thgradegeographyreflections.html">reflections</a></li>
            </ul>
        </li>
    </ul>
</li>

CSS:

#menu-trigger{
    display:inline-block;
}
ul#nav li {

    float:none;
    border-bottom: solid 2px #d5dce4;
    position:relative;
}
ul#nav li :last-child{
    border-bottom:none;
}
ul#nav {
    display:none;
    position:absolute;
    top:140px;
}
ul#nav a {
width: 100%;
}
ul#nav ul.submenu {
    display:none;
    position: static;
}
ul#nav ul.submenu2 {
display: none;
position: static;
}
ul#nav li:hover .submenu {
display: none;
}

ul#nav .submenu li:hover .submenu2 {
display: none;
}

JQuery:

jQuery(document).ready(function() {

jQuery("#menu-trigger").click(function(){
    jQuery("ul#nav").slideToggle();
});
$(window).resize(function(){
    if ($(window).width() > 500){
        $('ul#nav').removeAttr('style');
    }
});
$('ul#nav li').click(function(){
    if ($(window).width() <= 500){
    $(this).find('ul').not('ul .submenu2').slideToggle();

});

$('ul#nav li ul .submenu').click(function(){
    $(this).find('ul .submenu2').slideToggle();
    });
});     

it's my first attempt at web design so i'm sorry for the bad code...

thanks in advance!