how to create fly out for ul li - html

Question

I have an ul li structure that give me one fly out that is it gives me sub-menu but i want one more sub-menu on hover first sub-menu.
following is the structure
My Css
.main-navi li{
position: relative;
}
.main-navi li div,
.main-navi a{
display: block;
line-height: 80px;
text-transform: uppercase;
font-weight: 900;
padding-left: 30px;
color: #999;
border-bottom: 1px solid #FFFFFF;
position: relative;
z-index: 1;
background: #3a5795;
cursor: pointer;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div{
padding-left: 0;
border: none;
}
.main-navi li div{
position: relative;
z-index: 1;
background: #1A1A1A;
padding-left: 30px;
border-bottom: 1px solid #212121;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi a.active:hover,
.main-navi a.active{
padding-left: 50px;
color: #fff;
background: #ff3333;
cursor: default;
}
.main-navi .dot{
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: 30px;
background: #333;
border-radius: 50%;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div .corner,
.main-navi a .corner{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
opacity: 0;
z-index: -1;
border-top: 40px solid transparent;
border-left: 20px solid #1A1A1A;
border-bottom: 40px solid transparent;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div.active .corner,
.main-navi a.active .corner{
right: -20px;
opacity: 1;
border-left: 20px solid #ff3333;
}
.main-navi a.active:hover .dot,
.main-navi a.active .dot{
background: #fff;
}
.main-navi li div:hover,
.main-navi a:hover{
padding-left: 50px;
color: #fff;
background: #151515;
}
.main-navi li div.active{
padding-left: 50px;
background: #ff3333;
color: #fff;
}
.main-navi li div:hover .dot,
.main-navi a:hover .dot{
background: #ff3333;
}
.main-navi li div.active .dot{
background: #fff;
}
.drop-down {
left: 0;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 0;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-track
{
background-color: #ff3333;
}
::-webkit-scrollbar-thumb
{
background-color: #ffffff;
}
::-webkit-scrollbar-button
{
background-color: #000000;
}
::-webkit-scrollbar-corner
{
background-color: black;
}
.main-navi li:hover .drop-down{
left: 100%;
opacity: 1;
}
.active .drop-down{
overflow: visible;
}
.main-navi .drop-down a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down a:hover{
padding-left: 40px;
}
<!-- code i created to get sub of sub menu-->
.drop-down-in {
left: 100;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 1;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi .drop-down li:hover .drop-down-in{
left: 200%;
opacity: 1;
}
.active .drop-down-in{
overflow: visible;
}
.main-navi .drop-down .drop-down-in a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down .drop-down-in a:hover{
padding-left: 40px;
}
<!--ends here-->
this is css that contains code for both sub and sub inside sub-menu. class drop-down works fine i want one more sub-menu so i created class drop-down-in which is not working.
My html code is:
<ul>
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
Here is a Fiddle to my question.

Answer 1

You forgot to add the class attribute with the value "main-navi" to your first "ul" element.
<ul class="main-navi">
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>
Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>
Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
</li>
And in CSS you schould update:
.main-navi li:hover .drop-down{
left: 100%;
}
If the value for "left" is 100%, than this element wont be visible.
Here you can find an updated Fiddle.