when i click on my menu sub menu part is not visible?
<p>I have tried all the possible ways by changing the position in css file.When i click on the parent menu child menu content should be visible. even though i fixed the posisiton of nav tag i cannot see it in my browser.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function() {
  //Open the menu
  jQuery("#hamburger").click(function() {

    jQuery('#content').css('min-height', jQuery(window).height());

    jQuery('nav').css('opacity', 1);

    //set the width of primary content container -&gt; content should not scale while animating
    var contentWidth = jQuery('#content').width();

    //set the content with the width that it has originally
    jQuery('#content').css('width', contentWidth);

    //display a layer to disable clicking and scrolling on the content while menu is shown
    jQuery('#contentLayer').css('display', 'block');

    //disable all scrolling on mobile devices while menu is shown
    jQuery('#container').bind('touchmove', function(e) {
      e.preventDefault()
    });

    //set margin for the whole container with a jquery UI animation
    jQuery("#container").animate({
      "marginLeft": ["20%", 'easeOutExpo']
    }, {
      duration: 100
    });

  });

  //close the menu
  jQuery("#contentLayer").click(function() {

    //enable all scrolling on mobile devices when menu is closed
    jQuery('#container').unbind('touchmove');

    //set margin for the whole container back to original state with a jquery UI animation
    jQuery("#container").animate({
      "marginLeft": ["-1", 'easeOutExpo']
    }, {
      duration: 100,
      complete: function() {
        jQuery('#content').css('width', 'auto');
        jQuery('#contentLayer').css('display', 'none');
        jQuery('nav').css('opacity', 0);
        jQuery('#content').css('min-height', 'auto');

      }
    });
  });

});

$(function() {
  $("#menu").menu();
});

$('#menu1').click(
  function() {
    $(this).children('#sub-menu').toggle();
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html {
  overflow-y: scroll;
}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Arial;
  font-size: 18px;
}
header {
  background-color: #303030;
  padding: 10px;
  text-decoration: none;
  position: relative;
  width: 100%;
  z-index: 1;
  -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#hamburger {
  cursor: pointer;
  display: block;
  height: 24px;
  padding: 3px 4px 3px;
  position: relative;
  width: 25px;
  background: linear-gradient(to bottom, #303030 0%, #303030 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#808080', endColorstr='#808080', GradientType=0);
}
#hamburger div {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 2px 2px 2px 2px;
  height: 2px;
  margin-top: 3px;
  width: 90%;
}
/*
The navigation container in the background
*/

nav {
  opacity: 0;
  left: 0px;
  top: 0px;
  position: fixed;
  z-index: 0;
  width: 20%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: #808080;
  background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e3c3d), color-stop(100%, #2d2c2d));
  background: -webkit-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
  background: -o-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
  background: -ms-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
  background: linear-gradient(to bottom, #808080 0%, #808080 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e3c3d', endColorstr='#2d2c2d', GradientType=0);
}
/*
Style the navigation menu
*/

nav ul {
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 0;
}
nav li {
  position: fixed;
  font-size: 1em;
  font-weight: bold;
  border-bottom: 1px solid #222222;
  border-top: 1px solid #444444;
  padding: 15px;
}
nav li a {
  color: #fff;
  text-decoration: none;
  position: fixed;
}
/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/

#content {
  background-color: #FFFFFF;
  padding: 52px 10px 10px 10px;
  position: relative;
  /*absolute*/
  overflow-x: hidden;
  overflow-y: auto;
  width: auto;
  height: 100%;
  /*-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);*/
  /*box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);*/
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/

#contentLayer {
  display: none;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  z-index: 5;
}
#menu {
  position: fixed;
  width: 20%;
  height: 100%;
  background-color: cyan;
  text-decoration: underline;
  text-decoration-color: black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;header&gt;
  &lt;div id="hamburger"&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/header&gt;
&lt;!--The mobile navigation Markup hidden via css--&gt;
&lt;nav id="menu1"&gt;
  &lt;ul id="menu"&gt;
    &lt;li&gt;Dashboard
      &lt;ul id="sub-menu"&gt;
        &lt;li&gt;Network&lt;/li&gt;
        &lt;li&gt;Datacenter&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Monitor
      &lt;ul&gt;
        &lt;li&gt;Servies&lt;/li&gt;
        &lt;li&gt;Applications&lt;/li&gt;
        &lt;li&gt;Datacenter&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Configuration
      &lt;ul&gt;
        &lt;li&gt;Server&lt;/li&gt;
        &lt;li&gt;Services&lt;/li&gt;
        &lt;li&gt;Applications&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Faults
      &lt;ul&gt;
        &lt;li&gt;Overview&lt;/li&gt;
        &lt;li&gt;Active Alarams&lt;/li&gt;
        &lt;li&gt;Historical Alarams&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Maps&lt;/li&gt;
    &lt;li&gt;Reports&lt;/li&gt;
    &lt;li&gt;Administration
      &lt;ul&gt;
        &lt;li&gt;User Managements&lt;/li&gt;
        &lt;li&gt;Audit logs&lt;/li&gt;
        &lt;li&gt;Fault Settings&lt;/li&gt;
        &lt;li&gt;Global Settings&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;

&lt;/nav&gt;</code></pre>
</div>
</div>
</p>