Question

I’m Trying to create A drop down menu.

but i couldn’t get the sub menu item to hide on mouseout.

It hides itself on every move

My jQuery code:

<script type="text/javascript">
    $(document).ready(function() {
        $('ul ul').hide();
        $('ul li.top_menu_first a').removeAttr("href");
        $('ul li.top_menu_first > a').mouseover(function(event) {
            $(this).parent().find('ul').show('slow');
        });

        $('ul li.top_menu_first ul').mouseout(function(event) {
            $('ul ul').hide('slow');
        });
    });
</script>  

My HTMLcode:

<div id="top_menu">
    <ul>
        <li class="top_menu_first"><a href="http://google.com">ABC</a>
            <ul>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
            </ul>
        </li>   
        <li class="top_menu_first"><a>DEF</a></li>
        <li class="top_menu_first"><a>GHI</a></li>
        <li class="top_menu_first"><a>JKL</a>
            <ul>
                <li><a>4</a></li>
                <li><a>5</a></li>
                <li><a>6</a></li>
            </ul>
        </li>   
        <li class="top_menu_first"><a>MNO</a>
            <ul>
                <li><a>7</a></li>
                <li><a>8</a></li>
            </ul>
        </li class="top_menu_first">
    </ul>
</div>
<div id="footer"></div>

Please if anyone can help

Answer 1

Your code keeps track of the sub menu mouseOut .
I assume you want the sub menu to hide when it’s mouse out from menu name.

delete ul
from $('ul li.top_menu_first ul').mouseout(function(event) {(
http://jsfiddle.net/qgbtd/)
Make sure you are loading jquery in your HTML
Also like the comments say using mouseleave() gives it a nicer behavior