Question

Ok this works when i mouse over “Link 3” it opens sub sub menu (ex_subnav) but i need to also close ex_subnav menu when i mouse out “Link 3” towards other option in sub menu. With current code it works, however when i move mouse from “Link 3” to ex_subnav menu it reloads it because of $(".ex_dropdown").mouseleave(function(){

<script type="text/javascript">
    $(document).ready(function(){
        $("ul.topnav li a").mouseenter(function() {
            $(this).parent().find("ul.subnav").slideDown('fast').show();
        });  


        $(".dropdown").mouseleave(function(){ 
            $(this).parent().find("ul.subnav").slideUp('fast');
        });

        $(".ex_level").mouseenter(function() {
            $(this).parent().find("ul.ex_subnav").stop(true, true).slideDown('slow').show();
        });

        $(".ex_dropdown").mouseleave(function(){ 
            $(this).parent().find("ul.ex_subnav").stop(true, true).slideUp('slow');
        });
    });

HTML:

<ul class="topnav">  
    <li><a href="#">Home</a></li>  
    <li class="dropdown">  
        <a href="#">About Us</a>  
        <ul class="subnav dropdown">  
            <li><a href="#">Sub Nav Link 1</a></li>  
            <li><a href="#">Sub Nav Link 2</a></li>
            <li><a class="ex_level ex_dropdown" href="#">Link 3</a>
                <ul class="ex_subnav ex_dropdown">
                    <li><a href="#">One</a></li>  
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                </ul>  
            </li>    
        </ul>
    </li>  
</ul>
</script>

Answer 1

It’s reloading because

$(".ex_dropdown").mouseleave() <- this is working for

<a class="ex_level ex_dropdown" href="#">

that means if you leave on “a” tag, mouseleave() function works.

If you want to set mouseleave() function for submenu layout, just change this line,

<li><a class="ex_level ex_dropdown" href="#">Link 3</a>

like this in your html,

<li class="ex_level ex_dropdown"><a href="#">Link 3</a>

that will solve your problem.

Unstyled Demo