CSS menu with 3 nested lists - align left problems - html

Question

I have a navigation menu with 3 sub levels. I need the 3rd level list to align left but I can't get it to behave. I can get levels 2 and 3 to align relatively with the main menu but I want the 2nd level to align relatively and the 3rd level aligning completely to the left. I'd appreciate any help/advice going, here is what I have:
JSFIDDLE HERE
HTML:
<ul class="nav">
<li>LINK1</li>
<li>LINK2
<ul class="#">
<li>LINK2a
<ul class="#">
<li>LINK2b</li>
<li>LINK2c</li>
<li>LINK2d</li>
<li>LINK2e</li>
<li>LINK2f</li>
</ul>
</li>
</ul>
</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
CSS:
a, img { border:none; }
* { margin:0; padding:0; }
.nav{
display:block;
list-style:none;
text-align: left;
position: relative;
height: 30px;
}
.nav li {
display: block;
position: relative;
float: left;
border: 1px solid #FFF;
}
.nav li a {
width: 125px;
height: 30px;
display: table-cell;
vertical-align: middle;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
color: #000;
z-index: 2000;
background-color: #999;
}
li.active {
background-color: #999 ;
color: #000;
}
.nav li a:hover {
top: 30px;
}
.nav li:hover > a {
color:#fff;
background-color:#333;
}
.nav li ul {
width: 125px;
height: 25px;
position: absolute;
left: -9999px;
border: 1px solid #FFF;
}
.nav li:hover ul {
left: -2px;
}
.nav li li:hover > a {
color:#000;
background-color:#999;
}
.nav li li{
position: relative;
border: 1px solid #FFF;
height: 25px;
}
.nav li li a {
height: 25px;
top: 25px;
text-decoration: none;
font-size: 9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
display: table-cell;
vertical-align: middle;
color: #000;
z-index: 2000;
background-color: #999;
}
li li.active {
background-color: #a9d9d9 ;
color: #007f7b;
}
.nav li li:hover ul {
left: -2px;
top: 25px;
}
ul.nav li > ul {
width: 700px;
height: 25px;
background-color:blue;
}
ul.nav li > ul > li > ul {
background-color:red;
height: 25px;
}
ul.nav li > ul > li { display: none; }
ul.nav li:hover li { display: block; }

Answer 1

Well, you are missing some simple changes CSS to make it work properly. I'll post what changes I made here to make it work:
.nav li ul became .nav li > ul
.nav li:hover ul became .nav > li:hover > ul
.nav li li:hover ul became .nav li > li:hover ul
ul.nav li > ul > li { display: none; } became ul.nav li ul ul { display: none; }
ul.nav li:hover li { display: block; } became ul.nav li:hover > ul { display: block; }
Added:
ul.nav li ul ul {
position: absolute;
top:25px;
left: -129px;
}
ul.nav li li:hover > a {
color: white;
background-color: #333
}