Dropdown menu in jquery
<p>Hello friend I designed a drop down menu using <code>mouseeneter(</code>) and <code>mouseout()</code> in jQuery. The problem is when I <code>mouseout()</code> from the main menu, the drop down links slide up. I don't know how to set conditions on it please help. 
My code is </p>

<p>Jquery</p>

<pre><code>&lt;script&gt;
$(document).ready(function(){
    //alert('hi');
    $('#link-detail').css('display','none');
    $('#hover-detail').mouseenter(function(){
        $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
        $('#link-detail').slideDown();
        });
        $('#hover-detail').mouseout(function(){
        $('#link-detail').slideUp();
        });

    })
&lt;/script&gt;
</code></pre>

<p>html</p>

<pre><code>&lt;div class="link-detail-wrap"&gt;&lt;div id="hover-detail"&gt;hover me&lt;/div&gt;
&lt;div&gt;
  &lt;ul id="link-detail"&gt;
    &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;div&gt;hihihih&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.link-detail-wrap
{
    float:left;
    width:100%;
    position:relative;
    }

ul#link-detail 
{
    margin:0;
    padding:0;
    border:solid 1px #666;
    border-bottom:none;

    }
ul#link-detail  li
{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;

    }
ul#link-detail  li a
{
    text-decoration:none;
    color:#333;
    padding:2px 50px 2px 10px;
    background:#F0F0F0;
    border-bottom:1px solid #666;
    /*line-height:25px;*/
    font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform:capitalize;
    display:block;
    }
ul#link-detail  li a:hover
{
    background:#CCC;
    }
</code></pre>

<p>You can also see it on <a href="http://jsfiddle.net/36CXK/" rel="nofollow">http://jsfiddle.net/36CXK/</a></p>

<p>PLEASE HELP</p>

<p>Thanks in advance </p>
