title: close nested div ul li on click
body: <p>when i select a link from the drop down i want to close it.</p>
  
  <p>i tried to hide the div by clicking on the link but it doesn't work.
  you can try the demo link here <a href="http://jsfiddle.net/sevoug/2bd4z1k4/" rel="nofollow">http://jsfiddle.net/sevoug/2bd4z1k4/</a></p>
  
  <p><strong>jQuery and HTML</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#nav-search-context").hover(function () {
    $("#nav-search-menu").show();
  });
  
  $("#nav-search-context").click(function () {
    $("#nav-search-menu").show();
  });
  
  
  $("#wrapper").focusout(function () {
    $('#nav-search-menu').hide();
  });
  
  $('ul.menu li.work').click(function (e) {
    $("#nav-search-menu").hide();
    $('a.active').html("Search work");
    $("input.search").focus();
  });
  
  $('ul.menu li.jobs').click(function (e) {
    $("#nav-search-menu").hide();
    $('a.active').html("Search Jobs");
    $("input.search").focus();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper" style="width:500px; height:200px; margin-left:auto; margin-right:auto;"&gt;
    &lt;div id="eol-navigation-search" class=""&gt;
      &lt;form name="nav_search_form_enhanced" action="/search"&gt;
        &lt;ul id="nav-eol-search" class="nav-search nav-search-visitor"&gt;
          &lt;li class="link" id="nav-search-context"&gt;
            &lt;a class="active" href="javaScript:void(0);" id="nav-search-selected"&gt;Search Work&lt;/a&gt;
            &lt;ul class="menu" id="nav-search-menu" style="display:none"&gt;
              &lt;li class="work"&gt;&lt;a href="javaScript:void(0);"&gt;Search Work&lt;/a&gt;&lt;/li&gt;
              &lt;li class="jobs"&gt;&lt;a href="javaScript:void(0);"&gt;Search Jobs&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="nav-search-input"&gt;
            &lt;input type="text" x-webkit-speech="x-webkit-speech" onfocus="" class="search" name="keywords" id="nav-search-keywords" style="width: 279px;"&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>