How to make sub sub menu work in my navigation? - html

Question

Im having some problems with CSS, sub sub (third, fourth level) menus don't work and can't make it work I already tried everything I could think off. Anybody have the time to look at my code, please. I played with the code and tried all sorts of thing just nothing works.
I tried with
.navigation-1 ul li ul li ul li
but can't find the problem. I guess my css skills are not that good, lol :P
.navigation-1{
float: left;
width: auto;
margin-right: 0px;
}
.navigation-1 ul > li{
float: left;
width: auto;
position: relative;
}
.navigation-1 li:last-child{
margin-right: 0px;
}
.navigation-1 ul > li > a{
display: inline-block;
padding: 26px 30px;
font-size: 15px;
text-transform: capitalize;
/*font-family: 'Exo', sans-serif;*/
}
.navigation-1 > ul > li:after,
.navigation-1 > ul > li:before{
position: absolute;
content: "";
top:50%;
left: 0px;
bottom: 0px;
height: 10px;
width: 2px;
margin: 15px auto 0px;
right: 0px;
opacity: 0;
}
.navigation-1 > ul > li:before{
padding: 0px 5px;
border-left: 2px solid #2f3539;
border-right: 2px solid #2f3539;
opacity: 0;
}
.navigation-1 > ul > li:after{
border-right: 2px solid #2f3539;
height: 15px;
width: 2px;
opacity: 0;
}
.navigation-1 ul li ul{
position: absolute;
left: 0px;
right: 0px;
top:100%;
width: 195px;
background: #171e22;
visibility: hidden;
opacity: 0;
overflow: hidden;
z-index: 9999;
}
.navigation-1 ul li ul li{
float: left;
width: 100%;
}
.navigation-1 > ul > li.active:after,
.navigation-1 > ul > li.active:before,
.navigation-1 > ul > li:hover:after,
.navigation-1 > ul > li:hover:before{
opacity: 1;
}
nav.navigation-1 ul li:hover ul{
visibility: visible;
opacity: 1;
}
nav.navigation-1 ul li ul li a{
border-bottom: 1px solid #2f3539;
color: #fff;
display: inline-block;
padding:9px 15px;
position: relative;
width: 100%;
}
.navigation-1 ul li ul li:hover a{
background: #dc1937;
border-color: #dc1937;
color:#fff !important;
}
<nav class="navigation-1">
<ul>
<li class="active">home
<ul class="sub-menu children">
<li>Home Light</li>
</ul>
</li>
<li>artist
<ul class="sub-menu children">
<li>artist</li>
<li>artist 02</li>
<li>artist 03</li>
<li>dj</li>
</ul>
</li>
<li class="menu-item ">
event
<ul class="sub-menu children">
<li>
event list
</li>
<li>
event list 02
</li>
<li>
event list 03
</li>
<li>
event detail
</li>
</ul>
</li>
<li class="menu-item ">music
<ul class="sub-menu children">
<li>
dj
</li>
<li>
video
</li>
<li>
video list
</li>
<li>
video detail
</li>
<li>
mp3 list
</li>
<li>
music artist albums
</li>
<li>
music albums
</li>
<li>
masonry gallary
</li>
</ul>
</li>
<li class="menu-item ">blog
<ul class="sub-menu children">
<li>
blog detail
</li>
<li>
blog left sidebar
</li>
<li>
blog right sidebar
</li>
<li>
blog full
</li>
<li>
blog medium
</li>
<li>
blog small
</li>
<li>
masonry small
</li>
</ul>
</li>
<li class="menu-item ">
page
<ul class="sub-menu children">
<li>
shop
</li>
<li>
shop items
</li>
<li>
shop listing
</li>
<li>
headers
</li>
</ul>
</li>
<li>contact us</li>
</ul>
</nav>
Here is the original HTML code (without sub sub menus, as I already have my navigation managed through my CMS)
Thank you
R