Потеря списка раскрывающегося списка на mouseout

Question

Я создал простой раскрывающийся список, который я заполняю различными ссылками. Он содержит около 50 элементов, поэтому я завернул его в div, чтобы сделать его прокручиваемым. Проблема в том, что когда я нажимаю, я теряю весь список, если не отображаются первые два списка. Я построил это раскрывающееся меню как подменю, причем первые две ссылки являются «контейнерами».

Я немного понимаю, почему я теряю весь список, но не могу понять, как заставить верхние ссылки появляться на мыши.

$('.myMenu > li').bind('mouseover', openSubMenu); 
function openSubMenu() { 
     $('.myMenu').css('overflow','auto'); 
     $('.myMenu').css('height','400px'); 
     $('.ulMenu').css('visibility', 'visible'); 
}; 
$('.myMenu > li').bind('mouseout', closeSubMenu); 
function closeSubMenu() { 
     $('.myMenu').css('overflow','hidden'); 
     $('.myMenu').css('height','20px'); 
     $('.ulMenu').css('visibility', 'hidden'); 
    } 
} 
</script> 




<div id="menu"> 
    <ul class="myMenu"> 
    <li id="li_left"><a href="#"> Application </a></li> 
     <li id="li"> <a href="#"> Hover For Listing</a> 
      <ul id="tasksUl" class="ulMenu"> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

Я думаю, вы также должны опубликовать свой .css для списка. Я думаю, что вы получили меню и вы хотите открыть список на зависший <li id="li"> <a href="#"> Hover For Listing</a>

Вы устанавливаете

$('.myMenu').css('height','20px'); 

, и я не понимаю, почему вы могли бы сделать это. Также ваши стили .css довольно устарели.

Проверьте скрипку здесь: http://jsfiddle.net/eR2y9/1/

работает как шарм. Вам не нужно добавлять высоту для меню, потому что она динамически настраивается в зависимости от количества записей внутри. Также, если он установлен, чтобы отобразить его, он не занимает места. Если у вас есть дополнительные вопросы или я неправильно понял вашу проблему, не стесняйтесь отвечать на мой пост, и я найду решение для вас.