Question

Can anyone tell me what I’m doing wrong with my dropdown menu? It needs to close when I move the mouse away from ‘WEDDINGS’, but it will only close when I move the mouse away from the top menu.

http://www.wedevents.com.au/weddings.asp

Any help will be greatly appreciated.

HTML:

<ul class="topnav">
    <li>
        <a href="http://www.wedevents.com.au/index.asp"> 
        <img src="/images/menu_home.gif" name="home" onMouseOver="over(0)" onMouseOut="out(0)" alt="Home" /></a>
    </li>
    <li>
        <a href="http://www.wedevents.com.au/about.asp"> 
        <img src="/images/menu_about.gif" name="about" onMouseOver="over(1)" onMouseOut="out(1)" alt="About" /></a>
    </li>
    <li class="ddmhover">
        <a href="http://www.wedevents.com.au/weddings.asp"> 
        <img src="/images/menu_weddings.gif" name="weddings" onMouseOver="over(2)" onMouseOut="out(2)" alt="Weddings" /></a>
        <ul class="subnav">
            <li><a href="http://www.wedevents.com.au/grand.asp">Grand Package</a></li>
            <li><a href="http://www.wedevents.com.au/premium.asp">Premium Package</a></li>
            <li><a href="http://www.wedevents.com.au/platinum_beach.asp">Platinum Beach Package</a></li>
            <li><a href="http://www.wedevents.com.au/prestige.asp">Prestige Package</a></li>
            <li><a href="http://www.wedevents.com.au/beach.asp">Beach Package</a></li>
            <li><a href="http://www.wedevents.com.au/garden.asp">Garden Package</a></li>
            <li><a href="http://www.wedevents.com.au/intimate.asp">Intimate Package</a></li>
            <li><a href="http://www.wedevents.com.au/reception.asp">Reception Packages</a></li>
        </ul>
    </li>
    <li>
        <a href="http://www.wedevents.com.au/planning.asp">
        <img src="/images/menu_planning.gif" name="planning" onMouseOver="over(3)" onMouseOut="out(3)" alt="Planning" /></a>
    </li>
    <li>
        <a href="http://www.wedevents.com.au/gallery.asp">
        <img src="/images/menu_gallery.gif" name="gallery" onMouseOver="over(4)" onMouseOut="out(4)" alt="Gallery" /></a>
    </li>
    <li class="ddmhover2">
        <a href="http://www.wedevents.com.au/equipment.asp">
        <img src="/images/menu_equipment.gif" name="equipment" onMouseOver="over(5)" onMouseOut="out(5)" alt="Equipment" /></a>
        <ul class="subnav2">
            <li><a href="http://www.wedevents.com.au/equipment01.asp">Portable Gazebo</a></li>
            <li><a href="http://www.wedevents.com.au/equipment02.asp">Welcome Easel</a></li>
            <li><a href="http://www.wedevents.com.au/equipment03.asp">Wishing Well</a></li>
            <li><a href="http://www.wedevents.com.au/equipment04.asp">Chairs, Covers &amp; Sash</a></li>
            <li><a href="http://www.wedevents.com.au/equipment05.asp">Americana Chairs</a></li>
            <li><a href="http://www.wedevents.com.au/equipment06.asp">Church Pews</a></li>
            <li><a href="http://www.wedevents.com.au/equipment07.asp">Wedding Umbrellas</a></li>
            <li><a href="http://www.wedevents.com.au/equipment08.asp">Handcrafted Pedestals</a></li>
            <li><a href="http://www.wedevents.com.au/equipment09.asp">Bollards &amp; Handrail</a></li>
            <li><a href="http://www.wedevents.com.au/equipment10.asp">Silk Flower Arrangements</a></li>
            <li><a href="http://www.wedevents.com.au/equipment11.asp">Red Carpet</a></li>
            <li><a href="http://www.wedevents.com.au/equipment14.asp">White Carpet</a></li>
            <li><a href="http://www.wedevents.com.au/equipment12.asp">Ceremonial Arch</a></li>
            <li><a href="http://www.wedevents.com.au/equipment13.asp">Instant Marquee</a></li>
        </ul>
    </li>
    <li>
        <a href="http://www.wedevents.com.au/contact.asp">
        <img src="/images/menu_contact.gif" name="contact" onMouseOver="over(6)" onMouseOut="out(6)" alt="Contact Us" /></a>
    </li>
</ul>

CSS: (I copied and modified this…excuse the mess!)

ul.topnav {
    list-style: none;
    padding: 0 85px;
    margin: 0 auto;
    width: 630px;
    height: 36px;
    background: #b09a27;
    font-size: medium;
    text-align: left;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li  img{
    border: 0;
}
ul.topnav li a{
    padding: 0;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
/*--ul.topnav li a:hover{
    background: url(/images/ddm_hover.gif) no-repeat center top;
}--*/
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: left;
    background: url(/images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover { /*--Hover effect for trigger--*/
    background-position: center bottom;
    cursor: pointer;
}
ul.topnav li ul.subnav, ul.subnav2 {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0;
    top: 35px;
    /*--background: #333;--*/
    margin: 0;
    padding: 0;
    display: none;
    float: left;
    width: 170px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--border: 1px solid #111;--*/
}
ul.topnav li ul.subnav li, ul.subnav2 li {
    margin: 0; padding: 0;
    /*--border-top: 1px solid #252525;--*/ /*--Create bevel effect--*/
    /*--border-bottom: 1px solid #444;--*/ /*--Create bevel effect--*/
    clear: both;
    width: 170px;
}
html ul.topnav li ul.subnav li a, ul.subnav2 li a {
    float: left;
    width: 180px;
    background: #B09A27 url(/images/ddm_right_arrow.gif) no-repeat 10px center;
    padding-left: 20px;
    padding-bottom: 2px;
    padding-top: 2px;
}
html ul.topnav li ul.subnav li a:hover, ul.subnav2 li a:hover { /*--Hover effect for subnav links--*/
    background: #B09A27 url(/images/ddm_right_arrow.gif) no-repeat 10px center;
    color: #d0bd73;
}

JAVASCRIPT: (top half is for WEDDINGS and bottom half is for EQUIPMENT)

$(document).ready(function(){
    $("ul.topnav li.ddmhover").hover(function() { //When trigger is hovered...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow').stop(true,true); //When the mouse hovers out of the subnav, move it back up
        });
        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){  //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });
    $("ul.topnav li.ddmhover2").hover(function() { //When trigger is hovered...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav2").slideDown('fast').show(); //Drop down the subnav on hover

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav2").slideUp('slow').stop(true,true); //When the mouse hovers out of the subnav, move it back up
        });
        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){  //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });
});

Answer 1

$(document).ready(function(){
    $("ul.topnav li.ddmhover").hover(function() { //When trigger is hovered...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover

        // Right here you are attaching to .ddmhover's parent ".topnav",
        // not .ddmhover, so it is sliding up when you mouseOut of ".topnav"
        // This should be in a function that is a second parameter to your first
        // .hover() call instead of this...
        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow').stop(true,true); //When the mouse hovers out of the subnav, move it back up
        });
        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){  //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

Updated

I rewrote it to be more generalized. This way you don’t need to have a separate classname for each drop-down and subnav you create. Instead you just use “.ddmhover” and “.subnav” for them all.

$(document).ready(function(){
    $("li.ddmhover").mouseover(function() {
        var that = this,
        subnav = $(this).find("ul.subnav"),
        img = $(this).find('img'),
        subnavTimeout;

        $(this).addClass("subhover");
        subnav.slideDown('fast');

        var hideSubnav = function (evt) {
            // Wait half a second before trying to hide subnav
            subnavTimeout = setTimeout( function () {
                $(subnav).unbind('mouseleave');
                $(subnav).slideUp('slow');
                $(that).removeClass("subhover");
            }, 500);
        };

        $(subnav).mouseleave(hideSubnav)
        // since the title image fills the whole .ddmhover li we must attach to the image itself
        $(img).mouseleave(hideSubnav);

        // If the mouse entered the subnav don't close the subnav
        $(subnav).mouseenter(function () {
            clearTimeout(subnavTimeout);
        });
    });
});

We all do it from time to time, but Whenever you find yourself copy/pasting a chunk of code and then changing one or two strings it would be best to instead create a generalized method of dealing with it.