I'm struggling to get the third level of my navigation to function properly. I've managed to make the first and second levels work perfectly, but the third level isn't behaving as intended. I would like the third level to expand from right to left.
Any help is greatly appreciated.
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">Exit</a>
</li>
<li>
<a class="wow fadeInDownBig scroll" data-wow-delay="1.3s" href="#lunch">Phone Book</a>
</li>
<li>
<a class="wow fadeInDownBig scroll" data-wow-delay="1.1s" href="#lunch">Training</a></li>
<li>
<a class="wow fadeInDownBig scroll" data-wow-delay="0.9s" href="#lunch">Weekly Menu Selection</a></li>
<li>
<a class="wow fadeInDownBig scroll" data-wow-delay="0.7s" href="#about">Quick Access</a></li>
<li>
<a class="wow fadeInDownBig scroll" data-wow-delay="0.5s" href="#products"><span class="arrow"></span>Integrated Management System</a>
<ul class="subs">
<li><a class="sub" href="#">Organizational Chart</a></li>
<li><a class="sub" href="#">Vision and Mission</a></li>
<li><a class="sub" href="#" dir="rtl">IMS Organization Policy</a></li>
<li><a class="sub" href="#">Job Descriptions</a></li>
<li><a class="sub" href="#" dir="rtl">IMS Regulations</a></li>
<li><a class="sub" href="#">Processes</a></li>
<li>
<a class="sub" href="#">Executive Methods / Guidelines</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>Units</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="#">Legal Affairs and Contracts</a></li>
<li><a class="sub" href="#">Financial Affairs</a></li>
<li><a class="sub" href="#">Planning and Systems</a></li>
<li><a class="sub" href="#">Procurement and Supply</a></li>
<li><a class="sub" href="#">Maintenance and Repair</a></li>
<li><a class="sub" href="#">Operations</a></li>
<li><a class="sub" href="#">Human Resources</a></li>
</ul>
</li>
<li class="wow fadeInDownBig active"><a data-wow-delay="0.1s" href="#stores">Homepage</a></li>
</ul>
</nav>