drop-down css menu behind the actual menu (z-index) - html

Question

I'm having problem with submenu hiding behind the next line of menu.
vs
I've searched many topics and questions and basically everyone's saying that I need to add z-index > 100 to my sub-menu. I tried that everywhere, where sub-menu's present but nothing worked.
Do you have any idea how to make it work as it should?
Here's my code:
#header #nav{
float:right;
margin:0px;
position:relative;
z-index:100;
}
#header #nav > li {
display:inline-block;
margin:0;
position:relative;
z-index:100;
}
#header #nav > li > a{
color:#727272;
border:none;
background:none;
font-size:11px;
font-weight:700;
height:60px;
line-height:59px;
display:block;
padding:0 15px;
background:none center bottom;
position:relative;
}
#header #nav > li > a:hover{
color: #0073fe;
}
#nav li ul.sub-menu{
width:210px;
background:#fff;
position:absolute;
border:1px solid #ececec;
border-top:2px solid #0073fe;
margin:0;
top:96%;
padding:0 15px;
display:none;
-webkit-box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05);
box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.05);
margin-top:2px;
}
#nav li ul.sub-menu > span{
position:absolute;
top:-6px;
left:30px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #0073fe;
}
#nav li ul.sub-menu > li{
margin:0;
width:100%;
display:block;
}
#nav li ul li a{
font-size:11px;
font-weight:700;
display:block;
padding:7px 0px;
color:#727272;
border:none;
border-bottom:1px solid #ececec;
}
#nav li ul li a:hover{
color: #0073fe;
}
#nav li ul li:last-child a{
border-bottom:none !important;
}
#nav li ul li ul.sub-menu{
margin-left: 190px !important;
margin-top: -35px !important;
}
.slogan{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size:34px;
line-height:35px;
text-align:center;
font-weight:300;
letter-spacing: -0.01em;
color:#000;
padding:0px 30px 30px;
}

Answer 1

So you want : submenu > menu; which means: #nav li ul.sub-menu > #header/#nav
The problem is that you set up your menu to a high z-index and not your submenu (and results in: submenu < menu).
z-index defines a "set a layers" where your element would be, if it's set higher than an other one, then it will appear on top of it.
You need to delete the z-index for #header #nav and #header #nav>li and instead put a high z-index to #nav li ul.sub-menu.
#nav li ul.sub-menu {
z-index: 50; //It doesn't have to be a hundred, 50 should do, or even 5...
}