0

问题

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

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

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

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

在此处输入图像描述

场景 2：语言菜单菜单第一，导航第二（鼠标输入时导航中断） 在此处输入图像描述

最少需要的代码

（也在这里：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>

问题：我该怎么做才能使语言菜单与导航栏正确重叠，而不会破坏或穿透其他元素？

4

2 回答 2

2

如果你要使用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/

于 2013-04-29T16:19:01.017 回答
1

做这个：

 #language
        {
            float: right;
            width: 130px;
            margin-top: -70px;
            padding: 10px;
            position:relative;
            z-index: 1
        }
于 2013-04-29T16:21:39.597 回答