jquery - close nested div ul li on click -

when select link drop down want close it.

i tried hide div clicking on link doesn't work. can try demo link here http://jsfiddle.net/sevoug/2bd4z1k4/

jquery , html:

$("#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();  });

<div id="wrapper" style="width:500px; height:200px; margin-left:auto; margin-right:auto;">    <div id="eol-navigation-search" class="">      <form name="nav_search_form_enhanced" action="/search">        <ul id="nav-eol-search" class="nav-search nav-search-visitor">          <li class="link" id="nav-search-context">            <a class="active" href="javascript:void(0);" id="nav-search-selected">search work</a>            <ul class="menu" id="nav-search-menu" style="display:none">              <li class="work"><a href="javascript:void(0);">search work</a></li>              <li class="jobs"><a href="javascript:void(0);">search jobs</a></li>            </ul>          </li>          <li class="nav-search-input">            <input type="text" x-webkit-speech="x-webkit-speech" onfocus="" class="search" name="keywords" id="nav-search-keywords" style="width: 279px;">          </li>        </ul>      </form>    </div>  </div>

you need use css instead of using jquery. can check here http://jsfiddle.net/2bd4z1k4/10/

#nav-search-context ul{     display:none; } #nav-search-context:hover ul {     display:block } 

and remove in-line display none css.