onmouseout-event is triggered too early

Question

I'm faced with a strange problem when trying to implement a dropdown menu according to the following tutorial: http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php The onmouseout event is already triggered as soon as my cursor tries to select the second element in the dropdown selection (Add Uni). However as long as the cursor stays on the first menu item (Address Book) everything works perfectly.

<ul id="menulist">    
    <li class="menuOut"><a id="nav_User_User" title="@LocalizationMapper.NavigationProfile" href="javascript:void(0);" onclick="utils.Ajax.ajaxCall('User/User','','GET', '#main', 'false', this, null, true);">@LocalizationMapper.NavigationProfile</a>
           <ul>
              <li><a href="#">Address Book</a></li>
              <li><a href="#">Add Uni</a></li>
          </ul>
         <div class="clear"></div>
     </li>
</ul>

<script type="text/javascript">
    $(document).ready(function () {
        $('#menuList > li').live('mouseover', openSubMenu);
        $('#menuList > li').live('mouseout', closeSubMenu);
        function openSubMenu() {
            $(this).find('ul').css('visibility', 'visible');
        };

        function closeSubMenu() {
            $(this).find('ul').css('visibility', 'hidden');
        };
</script>

        /*style the sub menu*/
#menuList li ul {
    position:absolute;
    visibility:hidden;
    border-top:1px solid #fff;
    margin:0;
    padding:0;
}

#menuList li ul li {
    display:inline;
    float:none !important;
}

#menuList li ul li a:link, .menuList li ul li a:visited {
    background-color:#000;
    width:auto;
}

#menuList li ul li a:hover {
    color:#0CF; 
}

</style>

Answer 1

So finally I solved the problem on my own. Adding z-index to the submenu made it.

<style>
[...]
z-index: 3;
</style>