[英]Z-index dropdown menu issue
Well hello there.. 嗯,你好。
Can anyone tell me what to do when z-index is not working??? 有人可以告诉我在z-index无法正常工作时该怎么办吗???
All elements are in absolute and relative position but it doesn't respond to any value. 所有元素处于绝对位置和相对位置,但不响应任何值。
<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;
}
Here is a fiddle of my menu! 这是我菜单上的小提琴!
http://jsfiddle.net/kcgCX/180/ http://jsfiddle.net/kcgCX/180/
Thank you in advance. 先感谢您。
Z indexes are tricky, and from what I understand, only work well at the document root level or for positioning one or two specific things - not menus and multiple nested items. Z索引非常棘手,据我了解,Z索引只能在文档根级别或用于放置一两个特定内容(菜单和多个嵌套项目)时才能很好地工作。
Instead of using Z-indexes, I simply used white-space:nowrap
and modified positioning using child selectors. 我没有使用Z-index,而是使用了white-space:nowrap
并使用子选择器修改了位置。 Seems to work well: 似乎运作良好:
#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;
}
EDIT: Of course, this CSS can definitely be cleaned up a good bit, there is some redundant code. 编辑:当然,此CSS绝对可以清理干净,有一些冗余代码。 The point is to exhibit how using positioning, width, and not letting elements overflow or wrap can lead to less complicated layouts than using z-indexes and multiple level classes. 重点是要展示使用定位,宽度和不让元素溢出或环绕可以比使用z-indexes和多个级别类减少布局的复杂性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.