第三級導航

Question

我試圖讓我的導航的第三級工作，但我不能。將代碼包含在代碼片段中。導航的第一級和第二級很好。我希望從右到左打開第三層。

在此先感謝。

nav ul { 
 
    list-style: none; 
 
} 
 
a { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 11px; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
    text-decoration: none; 
 
} 
 
.nav ul { 
 
    *zoom: 1; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top:4px; 
 
} 
 
.nav ul:before, 
 
.nav ul:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.nav ul:after { 
 
    clear: both; 
 
} 
 
.nav ul > li { 
 
    float: left; 
 
    position: relative; 
 
} 
 
.nav a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    line-height: 1.2em; 
 
    color: #042e79; 
 
} 
 
.nav a.sub{ 
 
    display: block; 
 
    padding: 10px 20px; 
 
    line-height: 1.2em; 
 
    color: #FFF; 
 
} 
 
.nav a.secondsub{ 
 
    display: block; 
 
    padding: 10px 20px; 
 
    line-height: 1.2em; 
 
    color: #FFF; 
 
} 
 
.nav a:hover { 
 
    text-decoration: none; 
 
    background: #042e79; 
 
    color: #FFF; 
 
} 
 
.nav ul li:hover > a { 
 
    background-color: #042e79; 
 
    color: #FFF; 
 
} 
 
.nav li.active { 
 
    text-decoration: none; 
 
    background: #042e79; 
 
} 
 
.nav li.active a { 
 
    color: #FFF; 
 
} 
 
.nav li ul { 
 
    background: #042e79; 
 
    color: #FFF; 
 
} 
 
.nav li ul li { 
 
    width: 200px; 
 
} 
 
.nav li ul a { 
 
    border: none; 
 
} 
 
.nav li ul a:hover { 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 
.nav5 ul > li:hover ul { 
 
    max-height: 1000px; 
 
    -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0); 
 
} 
 
.nav5 li ul { 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: right; 
 
    top: 29px; 
 
    z-index: 1000; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg); 
 
    -webkit-transform-origin: 50% 0; 
 
    -webkit-transition: 350ms; 
 
    -moz-transition: 350ms; 
 
    -o-transition: 350ms; 
 
    transition: 350ms; 
 
} 
 
.arrow { 
 
    background: url("../images/content/arrow-down.png") no-repeat; 
 
    display: inline-block; 
 
    height: 8px; 
 
    width: 12px; 
 
    margin-right: 4px; 
 
}

 <nav class="nav nav5"> 
 
      <ul> 
 
       <li> 
 
        <a class="wow fadeInDownBig scroll" data-wow-delay="1.3s" href="#lunch">خروج</a> 
 
       </li> 
 
       <li> 
 
        <a class="wow fadeInDownBig scroll" data-wow-delay="1.3s" href="#lunch">دفترچه تلفن</a> 
 
       </li> 
 
       <li> 
 
        <a class="wow fadeInDownBig scroll" data-wow-delay="1.1s" href="#lunch">آموزش</a></li> 
 
       <li> 
 
        <a class="wow fadeInDownBig scroll" data-wow-delay="0.9s" href="#lunch">انتخاب غذای هفتگی</a></li> 
 
       <li> 
 
        <a class="wow fadeInDownBig scroll" data-wow-delay="0.7s" href="#about">دسترسی سریع</a></li> 
 
       <li> 
 
        <a class="wow fadeInDownBig scroll" data-wow-delay="0.5s" href="#products"><span class="arrow"></span>سیستم مدیریت یکپارچه</a> 
 
        <ul class="subs"> 
 
         <li><a class="sub" href="#">نمودار سازمانی</a></li> 
 
         <li><a class="sub" href="#">ماموریت چشم انداز</a></li> 
 
         <li><a class="sub" href="#" dir="rtl">خط مشی IMS سازمان</a></li> 
 
         <li><a class="sub" href="#">شرح وظایف</a></li> 
 
         <li><a class="sub" href="#" dir="rtl">نظام نامه IMS</a></li> 
 
         <li><a class="sub" href="#">فرآیندها</a></li> 
 
         <li> 
 
          <a class="sub" href="#">روش های اجرایی/دستورالعمل ها</a> 
 
          <ul class="secondsubs"> 
 
          <li><a class="secondsub" href="#">1</a></li> 
 
          <li><a class="secondsub" href="#">2</a></li> 
 
          </ul> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a class="wow fadeInDownBig scroll" data-wow-delay="0.3s" href="#cooking"><span class="arrow"></span>واحدها</a> 
 
        <ul class="subs"> 
 
         <li><a class="sub" href="#">DPA</a></li> 
 
         <li><a class="sub" href="#">HSEQ</a></li> 
 
         <li><a class="sub" href="#">ICT</a></li> 
 
         <li><a class="sub" href="#">امور حقوقی و قراردادها</a></li> 
 
         <li><a class="sub" href="#">امور مالی</a></li> 
 
         <li><a class="sub" href="#">برنامه ریزی و سیستم ها</a></li> 
 
         <li><a class="sub" href="#">تدارکات و امور کالا</a></li> 
 
         <li><a class="sub" href="#">تعمیرات و نگهداری</a></li> 
 
         <li><a class="sub" href="#">عملیات</a></li> 
 
         <li><a class="sub" href="#">منابع انسانی</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="wow fadeInDownBig active"><a data-wow-delay="0.1s" href="#stores">صفحه اصلی</a></li> 
 
      </ul> 
 
     </nav>

Answer 1

1. 使用direction: rtl當你與一個從右到左的語言工作。

2. 爲了更好的RTL一致性，使用float: right而不是float: left代替li。

3. 通過施加top: 0; right: 100%

最後的代碼看起來是這樣的刪除overflow: hidden從.nav5 li ul（這是hidding第三級UL）

使第三級塊從右側出現：

html {direction: rtl;} 
 

 
nav ul { 
 
    list-style: none; 
 
} 
 

 
a { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 11px; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
    text-decoration: none; 
 
} 
 

 
.nav ul { 
 
    *zoom: 1; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top: 4px; 
 
} 
 

 
.nav ul:before, 
 
.nav ul:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.nav ul:after { 
 
    clear: both; 
 
} 
 

 
.nav ul > li { 
 
    float: right; 
 
    position: relative; 
 
} 
 

 
.nav a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    line-height: 1.2em; 
 
    color: #042e79; 
 
} 
 

 
.nav a.sub { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    line-height: 1.2em; 
 
    color: #FFF; 
 
} 
 

 
.nav a.secondsubs { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    line-height: 1.2em; 
 
    color: #FFF; 
 
} 
 

 
.nav a:hover { 
 
    text-decoration: none; 
 
    background: #042e79; 
 
    color: #FFF; 
 
} 
 

 
.nav ul li:hover > a { 
 
    background-color: #042e79; 
 
    color: #FFF; 
 
} 
 

 
.nav li.active { 
 
    text-decoration: none; 
 
    background: #042e79; 
 
} 
 

 
.nav li.active a { 
 
    color: #FFF; 
 
} 
 

 
.nav li ul { 
 
    background: #042e79; 
 
    color: #FFF; 
 
} 
 

 
.nav li ul li { 
 
    width: 200px; 
 
} 
 

 
.nav li ul a { 
 
    border: none; 
 
} 
 

 
.nav li ul a:hover { 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.nav5 ul > li:hover > ul { 
 
    max-height: 1000px; 
 
    -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0); 
 
} 
 

 
.nav5 li ul { 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: right; 
 
    top: 29px; 
 
    z-index: 1000; 
 
    max-height: 0; 
 
    -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg); 
 
    -webkit-transform-origin: 50% 0; 
 
    -webkit-transition: 350ms; 
 
    -moz-transition: 350ms; 
 
    -o-transition: 350ms; 
 
    transition: 350ms; 
 
} 
 

 
.nav5 li ul.secondsubs { 
 
    top: 0; 
 
    right: 100%; 
 
} 
 

 
.arrow { 
 
    background: url("../images/content/arrow-down.png") no-repeat; 
 
    display: inline-block; 
 
    height: 8px; 
 
    width: 12px; 
 
    margin-right: 4px; 
 
}

<nav class="nav nav5"> 
 
<ul> 
 
    <li><a href="#">Nav 1</a></li> 
 
    <li><a href="#">Nav 1</a></li> 
 
    <li> 
 
    <a href="#">Nav 1</a> 
 
    <ul class="subs"> 
 
     <li><a href="" class="sub">Nav 2</a></li> 
 
     <li><a href="" class="sub">Nav 2</a></li> 
 
     <li> 
 
     <a href="" class="sub">Nav 2</a> 
 
     <ul class="secondsubs"> 
 
      <li><a href="" class="secondsubs">Nav 3</a></li> 
 
      <li><a href="" class="secondsubs">Nav 3</a></li> 
 
      <li><a href="" class="secondsubs">Nav 3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</nav>

的jsfiddle：https://jsfiddle.net/azizn/bkm1f4gw/