-1

我试着做一个简单的菜单。

jsFiddle

问题：

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

但是 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;
}
4

2 回答 2

0

您的负边距顶部.menu ul.l2导致它高于第一个li。如果你把它改成0px它应该没问题。

请看这个更正的小提琴。

于 2013-02-23T12:48:33.807 回答
0

只需添加z-index:-100;和.menu ul.l2删除另一个z-index

这是一个有效的现场演示

于 2013-02-23T12:48:57.007 回答