Amir Nikfar Amir Nikfar - 3 months ago 13
CSS Question

Third level of navigation

I'm trying to get third level of my navigation to work but I can't. Included the code in snippet. First and second level of the navigation works great. I want third level to be opened from right to left.

Thanks in advance.



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. Use direction: rtl when you are working with a right-to-left language.

  2. Use float: right instead of float: left for li for better RTL consistency.

  3. Remove overflow: hidden from .nav5 li ul (it was hidding the third level ul)

  4. Make the third-level block appear from the right side by applying top: 0; right: 100%

The final code looks like this:

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/