how to hide child ul on parent ul mouseout

Question

i am creating a menu using UN order list tag and jquery

<style type="text/css">
    ul
    {
        font-family: Arial, Verdana;
        font-size: 10px;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    ul#menu > li
    {
        display: block;
        position: relative;
        float: left;
        display: inline;
        list-style-type: none;
    }
    ul#menu li ul
    {
        display: none;
        position: absolute;
    }
    ul li a
    {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 5px 15px 5px 15px;
        background: #2C5463;
        margin-left: 1px;
        white-space: nowrap;
        text-align: center;
    }

    ul li a:hover
    {
        background: #617F8A;
    }
    /* ul li:hover ul
    {
        display: block;
        position: absolute;
        text-align: center;
    }
    li:hover li
    {
        font-size: 13px;
    }*/
    li:hover a
    {
        background: #617F8A;
    }
    li:hover li a:hover
    {
        background: #2C5463;
    }
</style>

this is the jquery plugin link which i have used

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

this is the jquery code

<script type="text/javascript">
    $(document).ready(function () {
        $("#menu li").mouseover(function () {
            $(".submenu").stop().slideDown();
        });
    });

    $("#menu").mouseout(function () {
        $(".submenu").hide();
    }); 
</script>

here is the html

<div id="linkbar">
    <ul id="menu">
        <li style="margin-left: 2px;"><a href="#">Home</a></li>
        <li><a href="#">About Us</a> </li>
        <li><a href="services.html">Services</a>
            <ul class="submenu">
                <li><a href="trademarks.html" >Trademarks</a></li>
                <li><a href="Patents.html" >Patents</a></li>
                <li><a href="copyright.html">Copy Right</a></li>
                <li><a href="design registration.html" >Design Registration</a></li>
                <li><a href="iso9001.html">ISO 9001</a></li>
                <li><a href="roc.html">Company Formation</a></li>
                <li><a href="importexpertcode.html">Import Export Code</a></li>
                <li><a href="shop establishment.html">Shop Extablishment</a></li>
                <li><a href="tax Duties.html">Tax- Duties</a></li>
                <li><a href="patnershipworks.html">Partnership Works</a></li>
            </ul>
        </li>
        <li><a href="contactus.html">Contact us</a> </li>
        <li><a href="application status.html">Application Status</a></li>
    </ul>
</div>

when i hover the mouse on ul menu it show the child menu but when it mouseout it does not hide the child ul ! what is wrong with it please help

please suggest if there is any website to download simple jquery menus

lonesomeday · Answer 1 · 2013-11-07T14:50:27.620

4

The problem is that you aren't binding your mouseout function on document ready, so #menu doesn't exist when you bind the event handler.

$(document).ready(function () {
    $("#menu li").mouseover(function () {
        $(".submenu").stop().slideDown();
    });

    $("#menu").mouseout(function () {
        $(".submenu").hide();
    }); 
});

Here is a jsFiddle showing your code working. Here is one with the code as you submitted it.

It's also worth noting the other alternative, which is not to use $(document).ready() at all. If you place your <script> element at the bottom of the body element, you don't need to wait for the ready event. So the following would also work:

<!-- at the end of the body element -->
    <script>
        $("#menu li").mouseover(function () {
            $(".submenu").stop().slideDown();
        });

        $("#menu").mouseout(function () {
            $(".submenu").hide();
        }); 
    </script>
</body>

edited Nov 07 '13 at 14:50

answered Nov 07 '13 at 13:06

lonesomeday

233,373
50
316
318

You don't need to use `$(document).ready`. Put your scripts at the bottom. – kzh Nov 07 '13 at 13:25
@kzh That's an option. It's not compulsory. – lonesomeday Nov 07 '13 at 13:30
There [are](http://stackoverflow.com/a/816596/143739) plenty [of good](http://stackoverflow.com/a/6026730/143739) reasons to [put your scripts at the bottom](http://thanpol.as/javascript/you-dont-need-dom-ready/). – kzh Nov 07 '13 at 14:14
I'm not arguing with you. ;-) I'm just adding some more information for other readers, as you did when you commented that it is an option and not compulsory. – kzh Nov 07 '13 at 14:47
1

@kzh What I actually meant was, "I'm not disagreeing with you." To which end, see my edit! – lonesomeday Nov 07 '13 at 14:50

score 0 · Accepted Answer · answered Nov 07 '13 at 13:04

Use .hover()

DEMO

$(document).ready(function () {
    $("#menu li:has('ul')").hover(function () {
        $(".submenu").stop().slideDown();
    }, function () {
        $(".submenu").hide();
    });
});

or

DEMO

$(document).ready(function () {
    $("#menu li").hover(function () {
        $(".submenu").stop().slideDown();
    }, function () {
        $(".submenu").hide();
    });
});

how to hide child ul on parent ul mouseout

2 Answers2