Showing right sub-ul of parent ul menu

Question

Hello, i have this html menu:

      <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>

And this 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);
        });

What i am trying to acomplish is that when i hover one of the li's in the main ul the child ul of that li should be displayed. and when i move the mouse out of the li or the child ul the menu should be visible for 2 seconds. It works through the main li button but if on the child ul and move out it just disapears, it doesnt wait for two seconds.

The waiting two seconds is so you can go in to the menu if you accidentaly move the mouse out of it.

Can anybody help me to fix this error? Maybe you have a better solution?

Here is also a screenshot on how the menu looks if it helps: screen shot under or click here

Answer 1

is this what you mean?

<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>