Question

I have a navigation menu where in menu “hotels”, a slide down panel is implemented.
This is the script:

 $(document).ready(function(){

    $(".HotelPaneltrigger").mouseenter(function(){
        $(".panel").slideDown("slow");
        //$(this).toggleClass("active"); return false; 
    });

    $(".panel").mouseleave(function(){
        $(this).slideUp("slow");
    }); 
});

Now, i have 2 problems:
.HotelPaneltrigger fires the panel (.panel) to slide down
the panel slides up as soon mouse leaves the .panel area

1st problem: hovering between my “HotelPaneltrigger” & “.panel” will result that the panel slides up and down multiple times, as both functions are executed as long user hovers between both elements.

2nd problem: panel is defined to slide up as soon user leaves “.panel” area

What solution to you recommend to:
slide down panel on “HotelPaneltrigger” and stay open as long user is in “HotelPaneltrigger” + “.panel” area.. and closes when hovering away from them?

I need to avoid multiple slide up and down of panel, while closing it when user moves away from the triggering link… not the .panel area

Your input is appreciated

The menu code i use:

        <ul class="primary_nav">  

                <li class="active"><a href="link to.php" class="hoverBtn">Link 1</a></li>
                <li class="HotelPaneltrigger"><a href="#" class="hoverBtn">Hotels</a></li>
                <li><a href="#" class="hoverBtn">Link 3</a>
                    <ul class="subnav">  
                        <li><a href="link to.php">Link 4</a></li>
                        <li><a href="link to.php">Link 5</a></li>
                    </ul>           
                </li>
                <li><a href="#" class="hoverBtn">Link 6</a>
                    <ul class="subnav">  
                        <li><a href="link to.php">Sub 1</a></li>
                        <li><a href="link to.php">Sub 2</a></li>
                        <li><a href="link to.php">Sub 3</a></li>        
                    </ul>
                </li>               

                <li class="last"><a href="link to.php" class="hoverBtn">Specials</a></li>           
        </ul>

Answer 1

Working example: http://jsfiddle.net/xmtpu/

Basically since its for a menu you put the panel inside the trigger and put both event handlers on the trigger. Because the panel is a child you are still “entering” on the tirgger even when your mouse is over the panel.