Question

I have the following so far:

$("#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");
});

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

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

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

EDIT::

HTML:

<!-- Navigation Links Bottom -->

<div id="main-links-bottom" class="shadow">

    <a href="index.php" id="main-link-bottom-about" class="main-infotext-bottom">About</a>

    <a href="#" class="main-infotext-bottom">Information</a>

    <a href="#" class="main-infotext-bottom">Services</a>

    <a href="#" class="main-infotext-bottom">Support</a>

    <a href="#" class="main-infotext-bottom">Careers</a>

    <a href="#" class="main-infotext-bottom">Mobile Site</a>

    <a href="#" class="main-infotext-bottom">Site Map</a>

    <a href="#" class="main-infotext-bottom" onclick="alert('Coming Soon!')">Mobile App</a>

    <div id="main-links-bottom-hover">

        <div id="main-about-hover">

            <div id="main-about-div">

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

            </div>

        </div>

    </div>

</div>

Answer 1

A good starting point is this. Make the navigation prettier than the example (put it under each category), but this will work.

jsfiddle: http://jsfiddle.net/xtBXj/2/

HTML:

<!-- Navigation Links Bottom -->
<input id="test"></input>
<div id="main-links-bottom" class="shadow">

    <a href="index.php" id="main-link-bottom-about" class="main-infotext-bottom">About</a>

    <a href="#" class="main-infotext-bottom">Information</a>

    <a href="#" class="main-infotext-bottom">Services</a>

    <a href="#" class="main-infotext-bottom">Support</a>

    <a href="#" class="main-infotext-bottom">Careers</a>

    <a href="#" class="main-infotext-bottom">Mobile Site</a>

    <a href="#" class="main-infotext-bottom">Site Map</a>

    <a href="#" class="main-infotext-bottom" onclick="alert('Coming Soon!')">Mobile App</a>

    <div id="main-links-bottom-hover">

        <div id="main-about-hover">

            <div class="hovers" id="About">

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

            </div>

          <div class="hovers" id="Information">

                <li id="lnk1" class="about-lnk"><a href="#">InfoContact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">InfoTechnology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

                    <div class="hovers" id="Services">

                <li id="lnk1" class="about-lnk"><a href="#">ServInfoContact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">ServInfoTechnology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

        </div>

    </div>

</div>

JS:

$(".hovers").hide();

//$("#main-links-bottom-hover").hide();

$(".main-infotext-bottom").mouseenter(function() {
    $(".hovers").slideUp();
    var m = $(this).html();
    $("#test").val(m);
    $("#" + m).slideDown();
});


$("#main-links-bottom").mouseleave(function() {
    $(".hovers").slideUp();
});