CSS Responsive Menu with subs not working - html

Question

Trying to create a responsive nav with sub menus, the first sub menu is working great, but cant seem to get the sub sub menus to work.
It would be great if i can just add UL's under each section and it will pop out.
What am i doing wrong
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav>ul>li {
text-align: center;
}
.nav>ul>li>a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<header>
<div class="nav">
<ul class="menu">
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1</li>
<li>
Tutorial #2
<ul>
<li>Tutorial #1</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>

Answer 1

Your menus are overlapping, that's why you cant see them properly. You can fix this moving the submenus to the right and show them when parent menu item, for example:
HTML:
<header>
<div class="nav">
<ul class="menu">
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1</li>
<li>
Tutorial #2
<ul class="submenu">
<li>Tutorial #1</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
CSS:
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
ul.submenu {
margin-left:100%;
margin-top: -50px;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul:not(.submenu) {
display: block;
}
.nav li ul li {
display: block;
}
.nav ul.submenu { display:none }
.nav li:hover ul li:hover ul.submenu { display:block; }
}

Answer 2

updated fddle https://jsfiddle.net/99Lecy15/2/
.nav li ul li {
display: block;
position:relative;
}
.nav li ul a + ul{
position:absolute;
left:100%;
top:0;
}