onmouseout-event 过早触发

Question

我在尝试根据以下教程实现下拉菜单时遇到一个奇怪的问题：http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/index.php 一旦我的光标尝试选择下拉选择中的第二个元素（添加 Uni），onmouseout 事件就已经被触发。然而，只要光标停留在第一个菜单项（通讯簿）上，一切都会完美运行。

<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

所以最后我自己解决了这个问题。将 z-index 添加到子菜单中就可以了。

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