title: How to expand and collapse a responsive mobile menu
body: <p>I have created a responsive menu, all that is left is to make it toggle. I am unsure as how to show the menu when the word menu is pressed. By default the menu is collapsed, then when the menu button is pressed it expands and when the button is pressed again it collapases. </p>
  
  <p>Could someone please help me out as I am new and unsure about this. I have uploaded my project onto jsfiddle. <code>link</code>
  <a href="http://jsfiddle.net/bLbdavqu/2/" rel="nofollow">http://jsfiddle.net/bLbdavqu/2/</a>
  HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;&lt;!--nav--&gt;
      &lt;div id="pull"&gt;
          &lt;a href="#" id="pull"&gt;Menu&lt;/a&gt;  
      &lt;/div&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="#.html"&gt;About Gnosis&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#.html"&gt;What is Gnosis&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#.html"&gt;Origins of Gnosis&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#.html"&gt;Foundations&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;      
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#.html"&gt;Articles&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#.html"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#.html"&gt;Courses&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#.html"&gt;Centres&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#.html"&gt;International&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;&lt;!--/nav--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> body {
       background:brown;
   }
  
  #pull {
      display:none;
      float:left;
      height:auto;
      width:100%;
  }
  
  #pull img {
      float:right;
  }
  
  
  #nav{
      float:left;
      height:155px;
      width:63%; 
      background:url(../images/top-banner.png) no-repeat;
      background-position:bottom;
      background-size:100%;
      position:relative;
  }
  
  #nav ul {
      height:auto;
      width:100%;
      list-style-type:none;
      position:absolute;
      bottom:0;
      *zoom:1;
  }
  
  #nav ul li {
      float:left;
      padding-left:20px;
      position:relative;
  }
  
  #nav ul li a {
      font-family:Trajan-Pro;
      font-size:0.9em;
      color:#fff;
      text-decoration:none;
  }
  
  #nav ul li a:hover {
      color:#d2aa76;
      border-bottom:2px solid #d2aa76;
      padding-bottom:5px;
  }
  
  #nav ul li:hover &gt; a {
      color:#d2aa76;
      border-bottom:2px solid #d2aa76;
      padding-bottom:5px;
  }
  
  
  /*1st level sub-menu */
  #nav ul ul {
      display:none;
  }
  
      #nav ul li:hover &gt; ul {
          height:auto;
          width:180px;
          display:block;
      }
  
      #nav ul ul li:hover &gt; a {
      color:#d2aa76;
      border-bottom:none;
  }
  
  #nav ul ul {
      padding:0;
      position:absolute;
      top:100%;
      padding-top:15px;
  }
  
      #nav ul ul li {
          float:none;
          position:relative;
          padding:7px 0px;
          border-top:1px solid #000;
  
          background: #423d33;
          background: linear-gradient(top, #423d33 0%, #4a4843 40%);
          background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
          background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);
  
          -webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
          -moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
          box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
  
          transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;
  
      }
          #nav ul ul li a {
              font-size:0.8em;
              padding-left:15px;
          }
  
          #nav ul ul li a:hover {
              border-bottom:none;
  
          }
  
  @media screen and (max-width: 1900px) {
      #logo {
          height:95px;
          width:100%;
          background:none;
      }
  
      #logo h1 {
          top:0;
          margin:0;
          padding-top:10px;
      }
  
      #header-container {
          height:auto;
      }
  
      #pull {
          display:block;
      }
  
      #nav {
          height:100%;
          width:100%;
          background:none;
          margin:0;
          padding:0;
          clear:both;
      }
  
      #nav ul {
          height:100%;
          position:static;
          margin:0;
          padding:0;
          display:block;
      }
  
       #nav ul &gt; li {
          float: none;
      }
  
      #nav ul li {
          padding-left:0px;
      }
  
      #nav ul li a {
          display:block;
          padding: 9px 9px;
          position: relative;
          z-index:100;
      }
  
      #nav ul ul {
          position:relative;
           top:0;
           bottom:0;
           margin:0;
           padding:0;
  
      }
              #nav ul li:hover &gt; ul {
              height:auto;
              width:100%;
  
          }
  
      #nav ul ul li   {
          border-top:none;
          background: #615f5b;
          -webkit-box-shadow:none;
          -moz-box-shadow:none;
          box-shadow:none;
      }
  
      #nav ul ul li a {
          display: block;
          padding-left:30px;
          position: relative;
          z-index: 100;
      }
  
     #nav ul &gt; li.hover &gt; ul , .nav li li.hover ul {
          position: static;
      }
   }
  </code></pre>