title: Navigation with onClick / Javascript not working
body: <p>I have created a menu for my website which you can find here:</p>
  
  <p><a href="http://jsfiddle.net/nq9Nt/9/" rel="nofollow">http://jsfiddle.net/nq9Nt/9/</a></p>
  
  <p>When click a category on the menu it opens that category on my main navigation?</p>
  
  <p>Is something conflicting or have I placed my Javascript in the wrong place?</p>
  
  <p>So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?</p>
  
  <p>Thank you</p>
  
  <pre><code>&lt;ul class="nav"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Category 1&lt;/a&gt;
  
  &lt;/li&gt;
  &lt;li class="drop"&gt;&lt;a href="#"&gt;Category 2&lt;/a&gt;
  
      &lt;ul id="sub1"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="drop"&gt;&lt;a href="#"&gt;Category 3&lt;/a&gt;
  
      &lt;ul id="sub1"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sticker&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sticker&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Category 4&lt;/a&gt;
  
      &lt;ul id="sub1"&gt;
          &lt;li&gt;&lt;a href="#"&gt; Mural&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Mural&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>         $(".drop")
           .on('click', function () {
           $(this).find('ul').toggle();
            })
  </code></pre>