Question

我尝试制作一个简单的菜单。

jsFiddle

问题：

我想在菜单level1下显示菜单level2.*。

但是z-index也不行。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

    <body>
        <div class="menu">
            <ul class="l1">
                <li> <a href="#">Menu level 1</a>

                    <ul class="l2">
                        <li> <a href="#">menu level 2.1</a>

                        </li>
                        <li><a href="#">menu level 2.2</a>

                        </li>
                        <li><a href="#">menu level 2.3</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>

</html>

的javascript

$.fn.xMenu = function () {
    return this.each(function () {
        var menu = $(this);

        menu.find('ul.l1').children('li').children('a').bind('click', function () {
            window.console.log(this);
            menu.find('ul.l2').hide();
            menu.find('ul.l1').children().removeClass('menu-borderd');
            $(this).parent().addClass('menu-borderd');
            $(this).parent().children('ul.l2').each(function () {
                $(this).addClass('active').show();
            });
        });
    });
}

$('.menu').xMenu();

CSS

.menu a:hover {
    background-color:#e4ebf8;
}
.menu a {
    outline:none;
}
.menu ul.l1 {
    list-style: none;
    margin:0;
    padding:0 0 0 10px;
    position: relative;
    z-index: 50;
}
.menu ul.l2 {
    list-style: none;
    width: 200px;
    position: absolute;
    border: 1px solid #C3D1EC;
    margin-top: -10px;
    display:none;
    padding: 0px 16px 0px 0;
    z-index: 49;
}
.menu ul.l1 li {
    padding:0;
    float:left;
    position: relative;
    z-index: 50;
}
.menu ul.l2 li {
    padding:0;
    float:none;
    margin: 0 0 0 0;
    width:100%;
}
.active ul {
    display:block;
}
.active a {
    background-color: white;
    display: block;
    height: 29px;
    padding: 0 8px 0 8px;
    position:relative;
}
.active a:hover {
    background-color:#e4ebf8;
}
.active ul.l1 a {
    border: 0 !important;
    box-shadow: 0 0 0 #CCCCCC;
    border:0;
    width: 100%;
}
.menu-borderd {
    border-color: #C3D1EC;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    box-shadow: 0 -1px 5px #CCCCCC;
}

Answer 1

.menu ul.l2上的负利润率最高导致它超过第一个li。如果将其更改为0px，则应该没问题。

请查看此更正fiddle。

Answer 2

只需将z-index:-100;添加到.menu ul.l2，然后移除其他z-index

即可

这是一个有效的 Live Demo

带有ul的菜单中的z-index不起作用

2 个答案: