那你好......
当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/
提前谢谢。
答案 0 :(得分：0)
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;
}