Отображение правой части вложенного родительского меню ul

Question

У меня есть это HTML-меню:

      <ul id='main'>
        <li class='active current' id='lighty'>
          <a href='/'>Lighty</a>
          <ul>
            <li class='sub'>
              <a href='/'>Hem</a>

            </li>
          </ul>
        </li>
        <li id='community'>
          <a href='/community'>Community</a>
        </li>
      </ul>

А это jquery:

        $("#menu ul > li").mouseenter(function(){
         id = $(this).attr("id");
         $("#menu #main li").removeClass("active");
         $(this).addClass("active");
        }).mouseleave(function(){
         id = $(this).attr("id");
         menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000);
        });

Что я пытаюсь сделать, так это то, что при наведении курсора на один из li в главном ul должен отображаться дочерний ul этого li. и когда я перемещаю мышь из li или child ul, меню должно быть видно в течение 2 секунд. Он работает через главную кнопку li, но если на дочернем элементе ul и выдвигаться, он просто исчезает, он не ждет две секунды.

Две секунды ожидания, так что вы можете войти в меню, если случайно вытащите из него мышь.

Кто-нибудь может мне помочь исправить эту ошибку? Может быть, у вас есть лучшее решение?

Вот также скриншот того, как меню выглядит, если оно помогает: снимок экрана под или нажмите здесь Снимок экрана http://img42.imageshack.us/img42/813/screenshotar.png

Answer 1

это то, что вы имеете в виду?

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $("ul#main > li").mouseenter( function(){
        $("#main li").removeClass("active");
        $(this).addClass("active");
    }).mouseleave(function(){
        setTimeout( function()
        {
            $("#main li").removeClass("active");
         }, 2000);
    });
});
//-->
</script>
<style type="text/css">
    #main li ul {
        display: none;
    }
    #main li.active ul {
        display: inline;
    }
</style>

<ul id="main">
    <li id="lighty">
        <a href="/">Lighty</a>
        <ul>
            <li class="sub">
                <a href="/">Hem</a>
            </li>
        </ul>
    </li>
    <li id="community">
        <a href="/community">Community</a>
        <ul>
            <li class="sub">
                <a href="/">more</a>
                <a href="/">more1</a>
                <a href="/">more2</a>
                <a href="/">more4</a>
            </li>
        </ul>
    </li>
</ul>