title: How can I create a drop down menu with JQuery
body: <p>I found a fiddle that has the functionality I want. However, I'm not sure how to adjust the code (css) to get it to drop down the menu links. </p>
  
  <p>When I click on the = I want the menu to drop down. The original code works by clicking on the parent and showing the child links. I assume it could work for my instance but not sure how.</p>
  
  <p>What I want to accomplish is clicking the = drops Item 1 and Item 2. Otherwise they are hidden.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- original code --&gt;
  &lt;ul id="nav"&gt;
      &lt;li&gt;Home&lt;/li&gt;
      &lt;li class="parent"&gt;About
          &lt;ul class="sub-nav"&gt;
              &lt;li&gt;Johnny&lt;/li&gt;
              &lt;li&gt;Julie&lt;/li&gt;
              &lt;li&gt;Jamie&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;Contact&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- my code --&gt;
  &lt;div class="header-nav"&gt;
    &lt;nav class="nav-menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;Item 1&lt;/li&gt;
          &lt;li&gt;Item 2&lt;/li&gt; 
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;a href="#" id="menu-icon"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('.parent').click(function() {
          $('.sub-nav').toggleClass('visible');
      });
  });
  
  // rename the JS to use the id/class for my script
  </code></pre>
  
  <p>The JSfiddle is here <a href="https://jsfiddle.net/cRsZE/982/" rel="nofollow">https://jsfiddle.net/cRsZE/982/</a></p>