How to bring specific element above another - html

Question

When I'm hovering specific menu option, then submenu options are blocked by slideshow element. Please refer below screenshot
Highlighted in red color submenu option is blocked by slideshow. When I changed z-index value for slideshow div to negative value then it is totally disappeared otherwise it is blocking submenu.
Please let me know, if any additional information required.
Menu.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul:after, header:after, #main:after {
clear: both;
content: "";
display: table;
}
ul:before, header:before, #main:before {
content: "";
display: table;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
body {
font-family: "Raleway";
font-weight: 400;
color: #34495E;
background: #f0f0f0;
}
header {
background: #2d3f51;
padding: 0 7%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
-webkit-perspective: 1555px;
-moz-perspective: 1555px;
perspective: 1555px;
}
#main {
padding: 2.5em 7%;
}
#main .efx-info {
width: 49%;
float: left;
padding: 2em 1em;
font-weight: 700;
border-radius: .2em;
}
#main .efx-info h1 {
line-height: 1;
display: inline-block;
padding: .1em .2em;
font-size: 5em;
margin: 0;
background: #e3e3e3;
}
#main .efx-info p {
margin: 0;
}
#main #efx-name {
color: #16A085;
font-weight: 900;
border-bottom: 4px solid #f5f5f5;
}
#main #efx-ease {
color: #34495E;
}
#main .menu-chks {
position: relative;
line-height: 1;
font-size: .9em;
width: 45%;
float: right;
}
#main .menu-chks input {
margin-right: .5em;
}
#main .menu-chks input:checked + span {
color: #16A085;
}
#main .menu-chks input:checked + span:before {
content: "\f046";
}
#main .menu-chks span {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#main .menu-chks span:before {
font-family: 'FontAwesome';
position: absolute;
left: 12px;
top: 10px;
color: #3b536b;
content: "\f096";
font-size: 1.4em;
}
#main .menu-chks label {
color: #e8e8e8;
font-weight: 600;
display: inline-block;
position: relative;
margin: .25em;
background: #2d3f51;
padding: .8em 1.2em .8em 2.5em;
border-radius: .4em;
}
#main .menu-chks label:hover {
cursor: pointer;
}
nav li {
position: relative;
display: inline-block;
float: left;
}
nav a {
position: relative;
/*z-index: 599;*/
color: #f5f5f5;
background: #2d3f51;
text-decoration: none;
display: block;
padding: 1.5em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
nav a i[class*="caret"] {
color: #3b536b;
margin-left: .15em;
}
nav a:hover {
color: #16A085;
}
nav a:hover + .submenu {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
}
nav .eiob .submenu {
-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
-moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
}
nav .ln .submenu {
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
nav .ei .submenu {
-webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
-moz-transition: all 0.3s ease-in, opacity 0.2s linear;
transition: all 0.3s ease-in, opacity 0.2s linear;
}
nav .eo .submenu {
-webkit-transition: all 0.3s ease-out, opacity 0.2s linear;
-moz-transition: all 0.3s ease-out, opacity 0.2s linear;
transition: all 0.3s ease-out, opacity 0.2s linear;
}
nav .submenu {
display: block;
opacity: 0;
position: absolute;
visibility: hidden;
/* z-index: 499;*/
width: 14em;
top: 100%;
left: 0;
background: #2d3f51;
box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
transition: all 0.25s ease;
}
nav .submenu li > .submenu {
top: 0;
left: 100%;
}
nav .submenu:hover {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
}
nav .submenu li {
float: none;
display: block;
}
nav .submenu a {
width: 100%;
display: block;
font-weight: 300;
padding: 1.4em 2em;
}
nav .submenu a:hover {
color: #f5f5f5;
background: #14957c;
}
nav.rx li:hover + .submenu {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
nav.rx .submenu {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
nav.rx .submenu:hover {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/*=== Fade Dwn ===*/
nav.fd li:hover + .submenu {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fd .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
}
nav.fd .submenu:hover {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fu li:hover + .submenu {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fu .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
nav.fu .submenu:hover {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/*=== Scale ===*/
nav.sc li:hover + .submenu {
opacity: 1;
-webkit-transform: rotateY(0deg) scale(1);
-moz-transform: rotateY(0deg) scale(1);
-ms-transform: rotateY(0deg) scale(1);
-o-transform: rotateY(0deg) scale(1);
transform: rotateY(0deg) scale(1);
}
nav.sc .submenu {
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
nav.sc .submenu:hover {
-webkit-transform: rotateY(0deg) scale(1);
-moz-transform: rotateY(0deg) scale(1);
-ms-transform: rotateY(0deg) scale(1);
-o-transform: rotateY(0deg) scale(1);
transform: rotateY(0deg) scale(1);
}
/*==== Rotate ====*/
nav.rt li:hover + .submenu {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
nav.rt .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
nav.rt .submenu:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*==== Move/Skew In ====*/
nav.mv li:hover + .submenu {
-webkit-transform: translateX(0px) skewX(0deg);
-moz-transform: translateX(0px) skewX(0deg);
-ms-transform: translateX(0px) skewX(0deg);
-o-transform: translateX(0px) skewX(0deg);
transform: translateX(0px) skewX(0deg);
}
nav.mv .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateX(-40px) skewX(-7deg);
-moz-transform: translateX(-40px) skewX(-7deg);
-ms-transform: translateX(-40px) skewX(-7deg);
-o-transform: translateX(-40px) skewX(-7deg);
transform: translateX(-40px) skewX(-7deg);
}
nav.mv .submenu:hover {
-webkit-transform: skewX(0deg);
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-o-transform: skewX(0deg);
transform: skewX(0deg);
}
/*==== Door ====*/
nav.dc li:hover + .submenu {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
nav.dc .submenu {
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
nav.dc .submenu:hover {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
index.html
<!DOCTYPE html>
<!--[if lte IE 9 ]><html class="ie lt-ie9" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en-US"> <!--<![endif]-->
<head>
<meta charset='UTF-8'>
<script src="js/modernizr.js" type="text/javascript"></script>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet prefetch' href='css/normalize.css'>
<link rel='stylesheet' href='css/menu.css'>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel='stylesheet' id='flatsome-css-minified-css' href='css/flatsome.min.css' type='text/css' media='all' />
</head>
<body>
<header >
<nav id="nav" class="ry" >
<ul id="main-menu" >
<li>
<i class="fa fa-home"></i> Home
</li>
<li>
<i class="fa fa-user"></i> About <i class="fa fa-caret-down"></i>
<ul class="submenu">
<li>Meet the Team</li>
<li>Careers</li>
<li>
More Items <i class="fa fa-caret-right"></i>
<ul class="submenu">
<li>A Sub-Item</li>
<li>
A Sub-Item
</li>
<li>
A Sub-Item
</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="fa fa-shopping-cart"></i> Our Books <i class="fa fa-caret-down"></i>
<ul class="submenu">
<li>Lorem</li>
<li>Aliquam</li>
<li>Vestibulum</li>
<li>Ipsum</li>
<li>Consectetur</li>
</ul>
</li>
<li>
<i class="fa fa-comment"></i> Contact Us
</li>
</ul>
</nav>
</header>
<div id="wrapper" class="box-shadow" >
<div class="header-wrapper before-sticky">
</div><!-- .header-wrapper -->
<div id="main-content" class="site-main hfeed light">
<!-- woocommerce message -->
<div id="content" role="main">
<div class="ux-slider-wrapper relative" >
<div class="ux-slider iosSlider hide-for-small slider-style-normal slider-nav-dark slider-nav-inside slider-nav-circle js-flickity"
data-flickity-options='{
"cellAlign": "center",
"imagesLoaded": true,
"lazyLoad": 1,
"freeScroll": false,
"wrapAround": true,
"autoPlay": 6000,
"prevNextButtons": true,
"contain" : true,
"percentPosition": true,
"pageDots": true,
"selectedAttraction" : 0.1,
"friction": 0.6,
"rightToLeft": false,
"draggable": true }'
style=""
>
<div id="banner_1261757255" class="ux_banner dark " style="height:325px; " data-height="325px" role="banner">
<a href="http://xxxxx.com/up-board-books/" > <div class="banner-bg " style="background-image:url('http://www.natgen.org/wp-content/uploads/2015/07/bar2.png'); "><img src="images/uttar-pradesh-book-Banner.jpg" alt="" style="visibility:hidden;" /></div>
<div class="banner-effect effect-sparkle"></div>
<div class="row" >
<div class="inner center text-center " style="width:60%;">
<div class="inner-wrap animated fadeIn" style=" ">
</div>
</div>
</div>
</a> </div><!-- end .ux_banner -->
<div id="banner_219276103" class="ux_banner dark " style="height:325px; " data-height="325px" role="banner">
<a href="http://xxxxx.com/product-category/competition-books/magazines/" > <div class="banner-bg " style="background-image:url('images/current-affairs.jpg'); "><img src="images/current-affairs.jpg" alt="" style="visibility:hidden;" /></div>
<div class="banner-effect effect-sparkle"></div>
<div class="row" >
<div class="inner center text-center " style="width:60%;">
<div class="inner-wrap animated fadeIn" style=" ">
</div>
</div>
</div>
</a> </div><!-- end .ux_banner -->
</div>
<div class="ux-loading dark"></div>
</div><!-- .ux-slider-wrapper -->
</div>
</div><!-- #main-content -->
</div><!-- #wrapper -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/flatsome.min.js'></script>
</body></html>

Answer 1

You must try z- index for sub menu.

Answer 2

It's hard to make anything up from only your CSS without HTML, but it looks like your z-index is just not high enough. A higher (positive) z-index brings an element to front, a negative z-index brings an element further back. Remember that z-index only works with positioned elements. I see that your submenu is positioned absolute, to that shouldn't be a problem. What is the z-index of your slideshow? Is this generated with JavaScript, setting a very high z-index? Try setting the z-index of your submenu to a very high number (9999999 or so) and see what happens.
Edit: I see your HTML now. Just try to increase your z-index to a very high number and see what happens. Everything else looks alright to me.