Jquery - Mouseenter and Mouseleave
<p>I have the following so far:</p>

<pre><code>$("#main-link-bottom-about").mouseenter(function() {
    $("#main-about-hover").slideDown("slow");
});

$("#main-about-hover, #main-link-bottom-about").mouseleave(function() {
    $("#main-about-hover").slideUp("slow");
});
</code></pre>

<p>This is basically a drop down menu when you hover over links. What I want to achieve is that when  you hover over <code>#main-link-bottom-about</code>, <code>#main-about-hover</code> slides back up when the mouse leaves either <code>#main-about-hover</code>, <code>#main-link-bottom-about</code>.</p>

<p>However, the problem is, if the mouse leaves <code>#main-about-hover</code> onto <code>#main-link-bottom-about</code>, <code>#main-about-hover</code> slides up where as I don't want this to happen.</p>

<p>Is it possible to add this exception or am I going about this the wrong way?</p>

<p>EDIT::</p>

<p>HTML:</p>

<pre><code>&lt;!-- Navigation Links Bottom --&gt;

&lt;div id="main-links-bottom" class="shadow"&gt;

    &lt;a href="index.php" id="main-link-bottom-about" class="main-infotext-bottom"&gt;About&lt;/a&gt;

    &lt;a href="#" class="main-infotext-bottom"&gt;Information&lt;/a&gt;

    &lt;a href="#" class="main-infotext-bottom"&gt;Services&lt;/a&gt;

    &lt;a href="#" class="main-infotext-bottom"&gt;Support&lt;/a&gt;

    &lt;a href="#" class="main-infotext-bottom"&gt;Careers&lt;/a&gt;

    &lt;a href="#" class="main-infotext-bottom"&gt;Mobile Site&lt;/a&gt;

    &lt;a href="#" class="main-infotext-bottom"&gt;Site Map&lt;/a&gt;

    &lt;a href="#" class="main-infotext-bottom" onclick="alert('Coming Soon!')"&gt;Mobile App&lt;/a&gt;

    &lt;div id="main-links-bottom-hover"&gt;

        &lt;div id="main-about-hover"&gt;

            &lt;div id="main-about-div"&gt;

                &lt;li id="lnk1" class="about-lnk"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                &lt;li id="lnk2" class="about-lnk"&gt;&lt;a href="#"&gt;Technology&lt;/a&gt;&lt;/li&gt;
                &lt;li id="lnk3" class="about-lnk"&gt;&lt;a href="#"&gt;Coverage&lt;/a&gt;&lt;/li&gt;
                &lt;li id="lnk4" class="about-lnk"&gt;&lt;a href="#"&gt;Environment&lt;/a&gt;&lt;/li&gt;
                &lt;li id="lnk5" class="about-lnk"&gt;&lt;a href="#"&gt;T&amp;amp;C's&lt;/a&gt;&lt;/li&gt;
                &lt;li id="lnk6" class="about-lnk"&gt;&lt;a href="#"&gt;Refund Policy&lt;/a&gt;&lt;/li&gt;

            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/div&gt;

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