Pure CSS3 Navigation Menu child level appears behind parent level - css

Question

I have a Pure CSS3 Navigation Menu where child level appears behind parent level.
Tried to resolve it by playing with z-index and other elements for 5 days now.
Thanks in advance!
Here's the HTML(direction RTL):
<div id="MainNavMenu">
<div id="main_navigation" class="blue main-menu "><!-- START -->
<ul>
<li class="main_list_item"><a class="main_list_link" href="#">Marketing</a>
<ul>
<li>NPA
<li>PMN
<li>NML
<ul>
<li>Document Library</li> <!-- Third Level -->
</ul>
</li>
<li>Cataloges</li>
<li>Price lists</li>
</ul>
</li>
<li class="main_list_item"><a class="main_list_link" href="#">פיתוח</a>
<ul>
<li>Document Library</li>
<li>Project Management</li>
<li>QA</li>
<li>Administration</li>
<li>R&D Mechanics</li>
<li>Catalog</li>
<li>Mtb</li>
<li>Itbs</li>
<li>Eit</li>
</ul>
</li>
<li class="main_list_item"><a class="main_list_link" href="#">משהו</a>
<ul>
<li>מכונות
<ul>
<li>ליב</li>
<li>MSG</li>
<li>Type</li>
<li>DIff</li>
</ul>
</li>
<li>בטיחות
<ul>
<li>נהלי בג"ס</li>
<li>מפרטים</li>
<li>טפסים</li>
<li>איכות הסביבה</li>
<li>בטיחות וגיהות</li>
<li>בריאות וארגונומיה</li>
<li>מידע ותקנים</li>
<li>MSDS</li>
</ul>
</li>
<li>משק ובטחון
<ul>
<li>ספריות מסמכים</li>
</ul>
</li>
<li>אבטחת איכות
<ul>
<li>מדריכי משתמש</li>
<li>מפרטים מחלקתיים</li>
<li>דו"חות מנטי</li>
<li>תעודות איכות</li>
</ul>
</li>
<li>רכש
<ul>
<li>ספריות מסמכים</li>
<li>חוזי ספק</li>
<li>TTR פלדות</li>
<li>FDT השחזה</li>
</ul>
</li>
</ul>
</li>
<li class="main_list_item"><a class="main_list_link" href="#">חברה שלי</a>
<ul>
<li>ספר טלפונים</li> <!-- SECOND LEVEL MENU -->
<li>טלפונים חשובים</li>
<li>פתיחת תקלת מחשוב</li>
<li>פינת נוסטלגיה</li>
<li>ימי הולדת</li>
<li>שערי מטבע</li>
<li>המתבח של ישקר</li>
<li>אירועים</li>
<li>ספריות מסמכים</li>
<li>משאבי אנוש
<ul>
<li>טפסים</li>
<li>מסמכי ביטוח</li>
<li>מידע והטבות</li>
<li>נהלים</li>
<li>הודעות</li>
<li>אירועים</li>
</ul>
</li>
</ul>
</li>
</ul>
</div> <!-- MAIN NAVIGATION END -->
</div>
Here is CSS:
/**************************************
Navigation Menu
***************************************/
#MainNavMenu
{
left: 1040px;
top: 70px;
position: absolute;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
height: 18px;
z-index:3;
}
#main_navigation{
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
font-size:8px;height:20px;float:right;
outline:none;
margin-bottom:250px;
box-shadow:1px 0px 2px rgba(0,0,0,0.5);
opacity: 1;
border-radius:5px;
}
.main-menu{position:relative;z-index:7;font-family: 'Ariel', tahoma, serif;letter-spacing:0pt; solid;}
.main-menu ul li a, .main-menu ul li a:link, .main-menu ul li a:visited{border-bottom:4pt solid transparent;padding-bottom:1px}
.main-menu ul {
margin:0;
padding:0px;
list-style-type:none;
z-index:5;
border-radius:5px;
}
.main-menu ul li {
position:relative;
display:inline;
float:right;
z-index:4;
}
/*Second level settings*/
.main-menu ul li > ul {
z-index:2;
visibility:hidden;
display:inline;
opacity:0;
padding:0px;margin:0px;
position:absolute;
/*width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;*/
width: 150px;
top:25px;
right:40px;
color:#FFFFFF;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:width 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
/*on hover over second level - third level appears*/
.main-menu ul li ul li:hover > ul {
display:block;
visibility:visible;
right:50px;
top: 15px;
opacity: 1;
z-index: 9999;
}
.main-menu ul li:hover > ul {
display:block;
visibility:visible;
right:0px;
display:block;
opacity:1;
}
.main_list_item {
height:20px;
z-index:0;
}
.main-menu ul li a.main_list_link,.main-menu ul li a.main_list_link:link{
line-height:20px;
text-shadow:none;
font-size:12px;
text-transform:uppercase;
}
.main-menu ul li > a {
display:block;
text-decoration:none;
overflow:hidden;
padding:0px 15px;
border-radius:3px;
}
* html .main-menu ul li a {
display:inline-block;
}
.main-menu ul li ul li {
display:list-item;
float:right;
border-left:none!important;
color:#FFFFFF;
padding:0px;margin:0px;
}
.main-menu ul li ul li a {
margin:0px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:width 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.main-menu ul li ul li{
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
border-bottom:solid 1px #ececec;
width:100%;
}
.main-menu ul ul {
background:#FFFFFF;
border:1px solid #e0e0e0;
-moz-box-shadow:0px 3px 3px rgba(0,0,0,0.1);
-webkit-box-shadow:0px 3px 3px rgba(0,0,0,0.1);
box-shadow:0px 3px 3px rgba(0,0,0,0.1);
z-index:9;
color:#707070;
}
.main-menu ul ul li a,.main-menu ul ul li a:visited,.main-menu ul ul li a:link {
height:100%;
text-transform: capitalize;
margin-right:0px!important;
margin-left:0px!important;
font-size:12px;
color:#707070;
z-index:10;
background-color: #FFFFFF ;
}
/*TEMP*/
/*TEMP*/
.main-menu ul ul li:hover > a{
cursor:pointer;
text-decoration:none!important;
padding-right:30px;
right: 40px;
z-index:11;
}
.main-menu ul ul li > a:after{
content:"";
opacity:0;
position:absolute;
right:20px;top:26px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right:5px solid #FEFEFE;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
z-index:12;
}
/*arrow pointer inside menu item*/
.main-menu ul ul li:hover > a:after{
content:"";
opacity:1;
position:absolute;
right:0px;top:5px;
width: 0;
height: 0;
border-right:5px solid #FEFEFE;
}
.main-menu ul ul ul {
position:absolute;
right: 100px;
top :20px;
}
/***********
Menu Color
************/
/* BLUE */
.blue{
background:#148cfc;
/*border:2px solid #ffd017;*/ /*yellow border*/
}
.blue ul ul{
border-top:2px solid #ffd017;
width:99%;
}
.blue ul ul li:hover > a{
text-decoration:none!important;
color:#FFF!important;
background:#148cfc;
padding-right:30px;
text-shadow:1px 0px 0px #3080b0;
}
.blue ul li a{
color:#FFFFFF;
}
.blue ul li > a:hover,.blue ul li:hover > a{
color:#ffd017!important;
}
/*menu items separator*/
.blue .main_list_item:after{
content:"";
z-index:-1;
position:absolute;
border-right:1px solid #e9e9e9;
box-shadow:1px 0px 0px #057794;
height:15px;
top:3px;
background:#FFF;
}
/*FIXING border */
.main_list_item:first-child:after{
border-right:none;
}
/**************************************
End Of Navigation Menu
***************************************/