CSS multilvel menu issue at third level - html

Question

I've made a three level menu in HTML and CSS.
The menu works until the third level (under products). The third ul sub-menu isn't displaying properly. It's being aligned improperly. I want it to get out of it's parent menu and be positioned at the right.
Here is a jsfiddle with my code.
I've changed some postions of ul, li but they don't seem to be working for me.
CSS, HTML in the fiddle:
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#menucon {
width:100%;
background-color:#222;
}
#nav {
clear: both;
font-size: 12px;
height: 42px;
}
#nav ul {
background-color: #222;
background-color: rgba(34,34,34,0.70);
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
#nav ul.sec { z-index: 2; }
#nav ul.third { z-index: 3; border:2px solid red; }
#nav li {
background: url('menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 27px;
padding: 14px 30px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav ul.subs li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 27px;
padding: 13px 25px 0;
position: relative;
width:178px;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs.sec {
left: 0;
top: 41px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
position:absolute;
}
#nav li:hover ul.subs.third {
left: 60px; /* test */
top: 41px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
position:absolute;
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li.sec {position:relative;}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 32px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 400ms ease-out ;
-ms-transition: all 400ms ease-out ;
-o-transition: all 400ms ease-out ;
-webkit-transition: all 400ms ease-out ;
transition: all 400ms ease-out ;
}
#lavalamp:hover {
-moz-transition-duration: 4500s;
-ms-transition-duration: 4500s;
-o-transition-duration: 4500s;
-webkit-transition-duration: 4500s;
transition-duration: 4500s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp, #lavalamp.act1 {
left: 35px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp, #lavalamp.act2 {
left: 180px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp, #lavalamp.act3{
left: 345px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp, #lavalamp.act4 {
left: 486px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp, #lavalamp.act5 {
left: 620px;
}
<div id="menucon">
<ul class="innercon" id="nav">
<li>HOME PAGE</li>
<li>PRODUCTS
<ul class="subs sec">
<li class="sec">LEVEL 1
<ul class="subs third">
<li>LEVEL 2</li>
<li>LEVEL 2</li>
</ul>
</li>
<li>LEVEL 1</li>
<li>LEVEL 1</li>
<li>LEVEL 1</li>
<li>LEVEL 1</li>
<li>LEVEL 1</li>
</ul>
</li>
<li>CONTACT US</li>
<div id="lavalamp"></div>
</ul>
</div>

Answer 1

Here is a DEMO to try if it fits your problem.
You gonna have to add this just this css:
.third{
display: none;
}
li > ul.sec > li:hover > ul.third {
display: inline-block;
position: absolute;
left: 100%!important;
top: 0!important;
z-index: 9;
width: 150px;
}
Explanation:
when you hover your second level item (li) you will show your submenu 100% left, i.e. next to the hovered li and top: 0 will place it inline with the hovered li.
You can adjust the width and z-index for your needs.

Answer 2

is this what you wanted?
Your question is still kinda unclear what you want.
ul.sec {
overflow: visible !important;
}
.subs .third {
left: 228px !important;
top: 41px !important;
}
https://jsfiddle.net/gsw4jxy8/4/