html - Z-index 下拉菜单问题

Question

你好..

谁能告诉我当 z-index 不工作时该怎么办？？？

所有元素都处于绝对和相对位置，但它不响应任何值。

<div id="main-menu" class="menu-main-container">
<ul id="menu-main" class="menu">
    <li id="nav-menu-item-11" class=" menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="http://localhost/" class="menu-link main-menu-link">Home</a>

    </li>
    <li id="nav-menu-item-10" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/?page_id=7" class="menu-link main-menu-link">Shortcodes</a>

        <ul class="menu-depth-1">
            <li id="nav-menu-item-374" class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/?page_id=7" class="menu-link sub-menu-link">Shortcodes</a>

            </li>
        </ul>
    </li>
    <li id="nav-menu-item-125" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-35 current_page_item menu-item-has-children"><a href="http://localhost/" class="menu-link main-menu-link">#35 (no title)</a>

        <ul class="menu-depth-1">
            <li id="nav-menu-item-376" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/?page_id=7" class="menu-link sub-menu-link">Shortcodes</a>

                <ul class="menu-depth-2">
                    <li id="nav-menu-item-377" class=" menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/?page_id=7" class="menu-link sub-menu-link">Shortcodes</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="nav-menu-item-333" class=" menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children"><a href="http://localhost" class="menu-link main-menu-link">Blog</a>

        <ul class="menu-depth-1">
            <li id="nav-menu-item-130" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children"><a href="http://localhost/?page_id=116" class="menu-link sub-menu-link">blog 1</a>

                <ul class="menu-depth-2">
                    <li id="nav-menu-item-375" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children"><a href="http://localhost/?page_id=2" class="menu-link sub-menu-link">Sample Page</a>

                        <ul class="menu-depth-3">
                            <li id="nav-menu-item-378" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-35 current_page_item"><a href="http://localhost/" class="menu-link sub-menu-link">#35 (no title)</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

        .parent-main-menu {
        background-color: #0c8fff;
        min-width: 200px;
        float: left;
    }

    #main-menu ul {
        list-style-type: none;
    }

    #main-menu ul li a {
        padding: 10px 15px;
        display: block;
        color: #fff;
        text-decoration: none;
    }

    #main-menu ul li a:hover {
        background-color: #007ee9;
    }

    #main-menu ul li:hover > ul {
        left: 100%;
        -webkit-transition: left 300ms ease-in;
        -moz-transition: left 300ms ease-in;
        -ms-transition: left 300ms ease-in;
        transition: left 300ms ease-in;
    }

    #main-menu ul li > ul {
        position: absolute;
        background-color: #333;
        top: 0;
        left: -200px;
        min-width: 200px;
        height: 100%;
        -webkit-transition: left 300ms ease-in;
        -moz-transition: left 300ms ease-in;
        -ms-transition: left 300ms ease-in;
        transition: left 300ms ease-in;
    }

    #main-menu ul li > ul li a:hover {
        background-color: #007ee9;
    }

    .menu {
        z-index: 400;
        position: relative;
    }

    .menu-depth-1 {
        z-index: 300;
        position: absolute;
    }

    .menu-depth-2 {
        z-index: 200;
        position: absolute;
    }

    .menu-depth-3 {
        z-index: 100;
        position: absolute;
    }

这是我的菜单!

http://jsfiddle.net/kcgCX/180/

提前谢谢你。

Answer 1

Z 索引很棘手，据我所知，它只适用于文档根级别或用于定位一两个特定内容 - 不适用于菜单和多个嵌套元素。

我没有使用 Z 索引，而是简单地使用了 white-space:nowrap 并使用子选择器修改了定位。似乎运作良好:

#main-menu {
width:15em;
background: #777;
position: relative;
height: auto;
    ul {
    background: #111 !important;
        li ul {
        background: #222 !important;
            li ul {
            background: #333 !important;
                li ul {
                background: #444 !important;
                }
            }
        }
    }
}
.parent-main-menu {
background-color: #0c8fff;
min-width: 200px;
float: left;
}
#main-menu ul {
list-style-type: none;
}
#main-menu ul li a {
padding: 10px 15px;
display: block;
color: #fff;
text-decoration: none;
}
#main-menu ul li a:hover {
background-color: #007ee9;
}
#main-menu > ul > li:hover > ul {
width: 200px;
-webkit-transition: width 300ms ease-in;
-moz-transition: width 300ms ease-in;
-ms-transition: width 300ms ease-in;
transition: width 300ms ease-in;
overflow:visible;
}
#main-menu > ul > li > ul, #main-menu > ul > li > ul > li > ul {
overflow: hidden;
left: 100%;
position: absolute;
background-color: #333;
top: 0;
width: 0;
white-space: nowrap;
height: 100%;
-webkit-transition: width 300ms ease-out;
-moz-transition: width 300ms ease-out;
-ms-transition: width 300ms ease-out;
transition: width 300ms ease-out;
}
#main-menu > ul > li > ul > li:hover > ul {
width: 200px;
overflow:visible;
-webkit-transition: width 300ms ease-in;
-moz-transition: width 300ms ease-in;
-ms-transition: width 300ms ease-in;
transition: width 300ms ease-in;    
}
#main-menu ul li > ul li a:hover {
background-color: #007ee9;
}

Fiddle

编辑:当然，这个 CSS 肯定可以清理得很好，有一些冗余代码。重点是展示如何使用定位、宽度以及不让元素溢出或换行可以导致比使用 z-index 和多级类更简单的布局。