title: Hide <nav> on click
body: <p>Created a little nav for a client that opens a 'site map' style of links which is popular opposed to the menu-after-menu of the past and it's worked great.</p>
  
  <p>Opens on click, and hides once the mouse leaves the div. However, now I've run into an issue now that we've introduced anchor links to that nav. With it ONLY going away once the mouse leaves, the page will go to the anchor link requested behind the nav, but not go away until the mouse leaves.</p>
  
  <p>I thought I could just add a line to move it on click, but that doesn't do anything. I changed the action to make the background red just to make sure it was triggering and it does, but it just doesn't want to adjust the top (the way I'm hiding) as it does the others. Hoping someone can have a look and tell me what I'm missing! Thanks guys</p>
  
  <p>Here's the javascript </p>
  
  <pre><code>$(document).ready(function () {
  $("#nav_hover").click(function () {
      setTimeout(function () {
          $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "95px");
      }, 20);
  });
  $("#nav_hover").mouseleave(function () {
      setTimeout(function () {
          $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
      }, 800);
  });
  
  });
  </code></pre>
  
  <p>Here's the nav bar the 'expanded nav' drops from:</p>
  
  <pre><code>&lt;nav id="main_nav"&gt;
   &lt;ul&gt;
    &lt;a id="nav_hover"&gt;
    &lt;li&gt;Nav Option&lt;/li&gt;
    &lt;/a&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And this is the expanded nav that comes down, that I want to hide whenever clicked:</p>
  
  <pre><code>&lt;nav id="nav_expanded_nav" class="expanded_nav"&gt;
   &lt;ul class="main_catagory_nav"&gt;
    &lt;h1&gt;Heading&lt;/h1&gt;
    &lt;p&gt;Description&lt;/p&gt;
     &lt;li&gt;&lt;a href="http://www.theplace.com/link.shtml#anchor"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="http://www.theplace.com/link.shtml#anchor2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And this is what I THOUGHT would be all I needed!</p>
  
  <pre><code>$(document).ready(function () {
  $("#nav_hover").click(function () {
      setTimeout(function () {
          $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "95px");
      }, 20);
  });
  $("#nav_hover").mouseleave(function () {
      setTimeout(function () {
          $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
      }, 800);
  });
  $(".nav_expanded_nav a").click(function () {
      setTimeout(function () {
          $("#nav_features #nav_expanded_nav.expanded_nav").css("top", "-800px");
      }, 20);
  });
  
  
  });
  </code></pre>
  
  <p>But it does nothing. If I change iut to <code>.css("background", "red")</code> it does change the background of that div just fine, which at least confirms it's the right idea. but it just can't impact the 'top' of css</p>