Question

问题

我有一个带有导航栏和语言菜单的HTML页面。鼠标中心会弹出语言菜单。

但是，根据首先在标记中定义哪一个，我会得到不同的效果。

注意：这只是一个显示问题所在的基本设置。风格现在并不重要。

场景1：首先导航，语言菜单第二（z-index和mouseenter问题）

enter image description here

场景2：语言菜单首先显示菜单，导航第二个（鼠标中心导航中断） enter image description here

所需的最少代码

（也在这里：http://jsfiddle.net/GEjjW/）

<!doctype html>
<html>
    <head>
        <style>
            html
            {
                background-color: gray;
            }
            body
            {
                width: 500px;
                background-color: white;
            }
            #menu
            {
                margin-top: 30px;
            }
            #menu ul li
            {
                display: inline;
            }
            #language
            {
                float: right;
                width: 130px;
                margin-top: -70px;
                padding: 10px;
            }
            #language div:hover, #language div.hover
            {
                color: black;
                background-color: #ecfbef;
            }
            #language ul
            {
                display: none;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(function()
            {
                $('#language > div').mouseenter(function()
                {
                    $(this).addClass('hover');
                    $(this).find('ul').slideDown(200);
                })
                .mouseleave(function()
                {
                    var div = $(this);
                    div.find('ul').slideUp(200);
                    setTimeout(function()
                    {
                        div.removeClass('hover');
                    }, 200);
                });
            });
        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li>Menu #1</li>
                <li>Menu #2</li>
                <li>Menu #3</li>
                <li>Menu #4</li>
                <li>Menu #5</li>
                <li>Menu #6</li>
                <li>Menu #7</li>
            </ul>
        </div>
        <div id="language">
            <div>
                <span>Lanugage: English</span>
                <ul>
                    <li>English</li>
                    <li>German</li>
                    <li>Spanish</li>
                </ul>
            </div>
        </div>
    </body>
</html>

问题：为了使语言菜单正确地与导航栏重叠而不会破坏或照亮其他元素，我该怎么办？

Answer 1

如果您要使用z-index，则需要使用position。对CSS进行以下更改：

#language div:hover, #language div.hover
        {
            color: black;
            background-color: #ecfbef;
            position:relative;
            z-index:10; /* choose number */
        }

样本： http://jsfiddle.net/dirtyd77/yQuxN/

Answer 2

这样做：

 #language
        {
            float: right;
            width: 130px;
            margin-top: -70px;
            padding: 10px;
            position:relative;
            z-index: 1
        }

jQuery mouseenter和z-index工作不正常

2 个答案: