javascript - jquery dropdown div disappears after leaving parent link -

i have following html:

<ul id="nav">     <li class="has-drop-down">         <a href="#" class="has-drop-down-a">search</a>             <div class="drop" style="display: none;">                 <ul>                     <li>                         <ul class="">                             <li class="item-107"><a href="#">link1</a></li>                             <li class="item-108"><a href="#">link2</a></li>                             <li class="item-109"><a href="#">link3/a></li>                             <li class="item-148"><a href="#">link4</a></li>                             <li class="item-170"><a href="#">link5</a></li>                         </ul>                     </li>                 </ul>             </div>     </li> </ul> 

unfortunately, html has have structure (it's being dynamically created cms).

i using following javascript create animation:

<script type="text/javascript">             jquery('body').ready(function () {             jquery('.drop').slideup(0);              jquery('.has-drop-down-a').hover(                 function () {                     jquery(this).siblings('.drop').slidedown(500);                 },                  function () {                     jquery(this).siblings('.drop').slideup(500);                 }             );             }); </script> 

css used:

#nav .drop {    left: -9999px;    padding: 27px 0 0;    position: absolute;    top: -9999px; } .drop:hover, .drop ul:hover {    position:relative;    top:-1px;    display: block !important; } #nav .drop > ul {    position: relative; } #nav {    display: inline-block;    vertical-align: top;    margin: 0 0 -27px;    padding: 0 0 27px;    position: relative; } 

my issue after leave 'search' link , move cursor down dropdown ('drop' div) dropdown disappears & comes back.

there demo of issue here if required http://goandco.w7.ext.starberry.com (i'll try jsfiddle future reference).

as commented uweb should ready() method called on document.

so change:

jquery('body').ready(function () { 

to:

jquery(document).ready(function () { 

also, delete left , top position of #nav .drop.

you might want trigger event on list-item instead of anchor. when triggering on list-item, submenu stay visible when hover it. otherwise, when blur out anchor, submenu slideup. need next() method instead of sibling() method.

change jquery to:

jquery(document).ready(function () {     jquery('.drop').slideup(0);      jquery('.has-drop-down').hover(function () {         jquery(this).find('.drop').slidedown(500);     },     function () {         jquery(this).find('.drop').slideup(500);     }); }); 

check this demo.