2

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

<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>
4

1 回答 1

3

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

<style>
[...]
z-index: 3;
</style>
于 2012-06-18T08:49:06.697 回答