我有一个纯CSS3导航菜单，其中子级别出现在父级别后面。 试图通过与z-index和其他元素一起玩5天来解决它。 提前致谢！ 这是HTML（方向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><a href="about-us.html">NPA</a>
<li><a href="about-us.html">PMN</a>
<li><a href="about-us.html">NML</a>
<ul>
<li><a href="about-us.html">Document Library</a></li> <!-- Third Level -->
</ul>
</li>
<li><a href="about-us.html">Cataloges</a></li>
<li><a href="about-us.html">Price lists</a></li>
</ul>
</li>
<li class="main_list_item"><a class="main_list_link" href="#">פיתוח</a>
<ul>
<li><a href="doclib.html">Document Library</a></li>
<li><a href="our-team.html">Project Management</a></li>
<li><a href="career.html">QA</a></li>
<li><a href="career.html">Administration</a></li>
<li><a href="career.html">R&D Mechanics</a></li>
<li><a href="career.html">Catalog</a></li>
<li><a href="career.html">Mtb</a></li>
<li><a href="career.html">Itbs</a></li>
<li><a href="career.html">Eit</a></li>
</ul>
</li>
<li class="main_list_item"><a class="main_list_link" href="#">משהו</a>
<ul>
<li><a href="doclib.html">מכונות</a>
<ul>
<li><a href="about-us.html">ליב</a></li>
<li><a href="our-team.html">MSG</a></li>
<li><a href="career.html">Type</a></li>
<li><a href="career.html">DIff</a></li>
</ul>
</li>
<li><a href="doclib.html">בטיחות</a>
<ul>
<li><a href="about-us.html">נהלי בג"ס</a></li>
<li><a href="our-team.html">מפרטים</a></li>
<li><a href="career.html">טפסים</a></li>
<li><a href="career.html">איכות הסביבה</a></li>
<li><a href="career.html">בטיחות וגיהות</a></li>
<li><a href="career.html">בריאות וארגונומיה</a></li>
<li><a href="career.html">מידע ותקנים</a></li>
<li><a href="career.html">MSDS</a></li>
</ul>
</li>
<li><a href="doclib.html">משק ובטחון</a>
<ul>
<li><a href="about-us.html">ספריות מסמכים</a></li>
</ul>
</li>
<li><a href="doclib.html">אבטחת איכות</a>
<ul>
<li><a href="about-us.html">מדריכי משתמש</a></li>
<li><a href="about-us.html">מפרטים מחלקתיים</a></li>
<li><a href="about-us.html">דו"חות מנטי</a></li>
<li><a href="about-us.html">תעודות איכות</a></li>
</ul>
</li>
<li><a href="doclib.html">רכש</a>
<ul>
<li><a href="about-us.html">ספריות מסמכים</a></li>
<li><a href="about-us.html">חוזי ספק</a></li>
<li><a href="about-us.html">TTR פלדות</a></li>
<li><a href="about-us.html">FDT השחזה</a></li>
</ul>
</li>
</ul>
</li>
<li class="main_list_item"><a class="main_list_link" href="#">חברה שלי</a>
<ul>
<li><a href="about-us.html">ספר טלפונים</a></li> <!-- SECOND LEVEL MENU -->
<li><a href="about-us.html">טלפונים חשובים</a></li>
<li><a href="about-us.html">פתיחת תקלת מחשוב</a></li>
<li><a href="about-us.html">פינת נוסטלגיה</a></li>
<li><a href="about-us.html">ימי הולדת</a></li>
<li><a href="about-us.html">שערי מטבע</a></li>
<li><a href="about-us.html">המתבח של ישקר</a></li>
<li><a href="about-us.html">אירועים</a></li>
<li><a href="about-us.html">ספריות מסמכים</a></li>
<li><a href="about-us.html">משאבי אנוש</a>
<ul>
<li><a href="about-us.html">טפסים</a></li>
<li><a href="about-us.html">מסמכי ביטוח</a></li>
<li><a href="about-us.html">מידע והטבות</a></li>
<li><a href="about-us.html">נהלים</a></li>
<li><a href="about-us.html">הודעות</a></li>
<li><a href="about-us.html">אירועים</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div> <!-- MAIN NAVIGATION END -->
</div>
这是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
***************************************/