submenu doesn't slides up on mouseleave of main menu
<p>When I mouseout of submenu then it slides up but if I mouseout from main menu without focusing on submenu then it wont.
Here is my code</p>

<pre><code>$('.dropdown').mouseenter(function () {
    $('.sublinks').stop(false, true).hide();
    var submenu = $(this).parent().next();
    submenu.css({
        position: 'absolute',
        top: $(this).offset().top + $(this).height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1
    });
    submenu.stop(true,
    true).slideDown(300);
    submenu.mouseleave(function () {
        $(this).slideUp(300);
    });
});
</code></pre>

<hr>

<p>HTML-</p>

<pre><code>&lt;ul id ="ul1" &gt;
        &lt;li&gt;&lt;a href="#" class="dropdown"&gt;&lt;/a&gt;&lt;/li&gt;

        &lt;li class="sublinks"&gt;
            &lt;table cellpadding ="0" cellspacing ="0"&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;a href="Product1.aspx"&gt;Product 1
                &lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;a href="Product2.aspx"&gt;Product 2&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;&lt;a href="Product3.aspx"&gt;Product 3&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;a href="Product4.aspx"&gt;Product 4&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;a href="Product5.aspx"&gt;Product 5&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;a href="Product6.aspx"&gt;Product 6&lt;/a&gt;&lt;/td&gt;
            &lt;/tr&gt;


            &lt;/table&gt;
        &lt;/li&gt;

    &lt;/ul&gt;
</code></pre>
