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索引只能在文檔根級別或用於放置一兩個特定內容（菜單和多個嵌套項目）時才能很好地工作。

我沒有使用Z-index，而是使用了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;
}

小提琴

編輯：當然，此CSS絕對可以清理干凈，有一些冗余代碼。 重點是要展示使用定位，寬度和不讓元素溢出或環繞可以比使用z-indexes和多個級別類減少布局的復雜性。