Zi Gang
Reputation: 303
z-index not working in absolute
I want the child of new arrivals always on top ( z- index : 9999 ), but i cannot make it work. I am confused with the absolute and relative class... I already tried couple of hours, still cannot make it work... need help.
/* parent menu */
ul.menu {
list-style: none;
padding: 0;
margin: 0;
/*background: #34495e;*/
margin: 50px auto;
width: 800px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
z-index: 10;
position: relative;
}
ul.menu li {
display: block;
float: left;
background: #34495e;
transform: skewX(25deg);
}
.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
}
.menu a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica;
font-size: 14px;
}
ul.submenu.level_2 {
position: absolute;
width: auto;
left: 0%;
transform: skewX(-25deg);
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
z-index: 99999;
}
ul.submenu.level_3 {
left: 100%;
top: 0;
position: absolute;
width: auto;
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_4 {
left: 100%;
top: 0;
position: absolute;
width: auto;
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_5 {
left: 100%;
top: 0;
position: absolute;
width: auto;
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_6 {
left: 100%;
top: 0;
position: absolute;
width: auto;
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_2.move-menu {
left: -100%;
}
li.menu-list ul {
display: none;
}
ul.menu li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
/* hover effect */
li.menu-list:hover > ul {
display: block;
/*position: absolute;*/
padding: 0px;
}
/* parent menu hover effect*/
li.menu-list:hover {
background: #ec3939;
}
li.menu-list:hover a {
transform: skewX(-25deg);
}
/* children menu hover effect*/
li.menu-list:hover li {
float: none;
transform: skewX(0deg);
}
li.menu-list:hover li a {
float: none;
transform: skewX(0deg);
}<div class="container hidden-xs">
<ul class="menu">
<li>
<a href="http://sedtag.dev/">Home</a>
</li>
<li class="menu-list">
<a href="category-16-b0-New+Arrivals.html">New Arrivals<b class="caret"></b></a>
<ul class="submenu level_2">
<li class="menu-list level_2">
<a href="category-1526-b0-30+Nov+2015.html">30 Nov 2015</a>
</li>
<li class="menu-list level_2">
<a href="category-1525-b0-28+Nov+2015.html">28 Nov 2015</a>
</li>
<li class="menu-list level_2">
<a href="category-1521-b0-26+Nov+2015.html">26 Nov 2015</a>
</li>
<li class="menu-list level_2">
<a href="category-1510-b0-24+Nov+2015.html">24 Nov 2015</a>
</li>
</ul>
</li>
<li class="menu-list">
<a href="category-1533-b0-about+us.html">about us</a>
</li>
<li class="menu-list">
<a href="category-1534-b0-contact.html">contact</a>
</li>
<li class="menu-list">
<a href="category-11-b0-Restock+Items.html">Restock Items<b class="caret"></b></a>
<ul class="submenu level_2">
<li class="menu-list level_2">
<a href="category-1527-b0-30+Nov+2015.html">30 Nov 2015</a>
</li>
</ul>
</li>
<li class="menu-list">
<a href="category-5-b0-Ready+Stock.html">Ready Stock<b class="caret"></b></a>
<ul class="submenu level_2">
<li class="menu-list level_2">
<a href="category-1165-b0-Baby.html">Baby<b class="caret"></b></a>
<ul class="submenu level_3">
<li class="menu-list level_3">
<a href="category-1536-b0-baby+child.html">baby child<b class="caret"></b></a>
<ul class="submenu level_4">
<li class="menu-list level_4">
<a href="category-1537-b0-baby+children.html">baby children<b class="caret"></b></a>
<ul class="submenu level_5">
<li class="menu-list level_5">
<a href="category-1538-b0-baby+children+2.html">baby children 2<b class="caret"></b></a>
<ul class="submenu level_6">
<li class="menu-list level_6">
<a href="category-1539-b0-baby+children+3.html">baby children 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-list level_4">
<a href="category-1543-b0-baby+children+clone.html">baby children clone</a>
</li>
</ul>
</li>
<li class="menu-list level_3">
<a href="category-1542-b0-baby+child+2.html">baby child 2</a>
</li>
</ul>
</li>
<li class="menu-list level_2">
<a href="category-960-b0-Jubah.html">Jubah<b class="caret"></b></a>
<ul class="submenu level_3">
<li class="menu-list level_3">
<a href="category-1541-b0-Jubah+child.html">Jubah child</a>
</li>
</ul>
</li>
<li class="menu-list level_2">
<a href="category-306-b0-Cheong+Sam.html">Cheong Sam</a>
</li>
</ul>
</li>
</ul>
</div>Upvotes: 1
Views: 14413
Answers (2)
Rahul
Reputation: 518
You didn't set position to child li element and that's why the z-index wasn't working.
Replace:
li.menu-list:hover {
background: #ec3939;
}
with
li.menu-list:hover {
background: #ec3939;
z-index: 1;
}
AND this
ul.menu li {
display: block;
float: left;
background: #34495e;
transform: skewX(25deg);
}
with
ul.menu li {
display: block;
float: left;
background: #34495e;
transform: skewX(25deg);
position: relative;
}
Upvotes: 1
Pete
Reputation: 58462
z-index only works for positioned elements on the same level as each other first - so in this case you need to make the hovered li a higher z-index than the non hovered li:
/* parent menu */
ul.menu {
list-style: none;
padding: 0;
margin: 0;
/*background: #34495e;*/
margin: 50px auto;
width: 800px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
z-index: 10;
position: relative;
}
ul.menu li {
display: block;
float: left;
background: #34495e;
transform: skewX(25deg);
}
.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
}
.menu a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica;
font-size: 14px;
}
ul.submenu.level_2 {
position: absolute;
width: auto;
left: 0%;
transform: skewX(-25deg);
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_3 {
left: 100%;
top: 0;
position: absolute;
width: auto;
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_4 {
left: 100%;
top: 0;
position: absolute;
width: auto;
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_5 {
left: 100%;
top: 0;
position: absolute;
width: auto;
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_6 {
left: 100%;
top: 0;
position: absolute;
width: auto;
transform-origin: left top;
padding: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ul.submenu.level_2.move-menu {
left: -100%;
}
li.menu-list ul {
display: none;
}
ul.menu li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
/* hover effect */
li.menu-list:hover > ul {
display: block;
/*position: absolute;*/
padding: 0px;
}
li.menu-list {
position: relative;
z-index: 1;
}
/* parent menu hover effect*/
li.menu-list:hover {
background: #ec3939;
z-index: 2;
}
li.menu-list:hover a {
transform: skewX(-25deg);
}
/* children menu hover effect*/
li.menu-list:hover li {
float: none;
transform: skewX(0deg);
}
li.menu-list:hover li a {
float: none;
transform: skewX(0deg);
}<div class="container hidden-xs">
<ul class="menu">
<li><a href="http://sedtag.dev/">Home</a>
</li>
<li class="menu-list">
<a href="category-16-b0-New+Arrivals.html">New Arrivals<b class="caret"></b></a>
<ul class="submenu level_2">
<li class="menu-list level_2">
<a href="category-1526-b0-30+Nov+2015.html">30 Nov 2015</a>
</li>
<li class="menu-list level_2">
<a href="category-1525-b0-28+Nov+2015.html">28 Nov 2015</a>
</li>
<li class="menu-list level_2">
<a href="category-1521-b0-26+Nov+2015.html">26 Nov 2015</a>
</li>
<li class="menu-list level_2">
<a href="category-1510-b0-24+Nov+2015.html">24 Nov 2015</a>
</li>
</ul>
</li>
<li class="menu-list">
<a href="category-1533-b0-about+us.html">about us</a>
</li>
<li class="menu-list">
<a href="category-1534-b0-contact.html">contact</a>
</li>
<li class="menu-list">
<a href="category-11-b0-Restock+Items.html">Restock Items<b class="caret"></b></a>
<ul class="submenu level_2">
<li class="menu-list level_2">
<a href="category-1527-b0-30+Nov+2015.html">30 Nov 2015</a>
</li>
</ul>
</li>
<li class="menu-list">
<a href="category-5-b0-Ready+Stock.html">Ready Stock<b class="caret"></b></a>
<ul class="submenu level_2">
<li class="menu-list level_2">
<a href="category-1165-b0-Baby.html">Baby<b class="caret"></b></a>
<ul class="submenu level_3">
<li class="menu-list level_3">
<a href="category-1536-b0-baby+child.html">baby child<b class="caret"></b></a>
<ul class="submenu level_4">
<li class="menu-list level_4">
<a href="category-1537-b0-baby+children.html">baby children<b class="caret"></b></a>
<ul class="submenu level_5">
<li class="menu-list level_5">
<a href="category-1538-b0-baby+children+2.html">baby children 2<b class="caret"></b></a>
<ul class="submenu level_6">
<li class="menu-list level_6">
<a href="category-1539-b0-baby+children+3.html">baby children 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-list level_4">
<a href="category-1543-b0-baby+children+clone.html">baby children clone</a>
</li>
</ul>
</li>
<li class="menu-list level_3">
<a href="category-1542-b0-baby+child+2.html">baby child 2</a>
</li>
</ul>
</li>
<li class="menu-list level_2">
<a href="category-960-b0-Jubah.html">Jubah<b class="caret"></b></a>
<ul class="submenu level_3">
<li class="menu-list level_3">
<a href="category-1541-b0-Jubah+child.html">Jubah child</a>
</li>
</ul>
</li>
<li class="menu-list level_2">
<a href="category-306-b0-Cheong+Sam.html">Cheong Sam</a>
</li>
</ul>
</li>
</ul>
</div>In the above snippet I have changed the following:
li.menu-list {
position: relative;
z-index: 1;
}
/* parent menu hover effect*/
li.menu-list:hover {
background: #ec3939;
z-index: 2;
}
Upvotes: 5
Related Questions
- z-index not working with position absolute
- Z-index not works as per expected between absolute and relative elements
- z-index not working with absolute positioning of elements
- z-index not working even with absolute positioning
- CSS Z-Index not working on absolute positioning
- Z-Index is "not working"
- CSS - Z-index is not working with positions relative and absolute
- z-index Not Working with Absolute Position
- z-index doesn't work with absolute elements
- z-index does not work