Pure CSS Responsive Multilevel Menu - css

Question

I'm trying to modify This project of Osvaldas Valutis adding a 3rd and 4th level, but my css knowledge is not so deep and the result, as you can see HERE is very poor:
besides HTML, on CSS side I added
* third level */
#nav li li li{
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
}
#nav li li:hover li {
display: block;
left: 2px;
top:0px;
right: 0;
}
#nav li:not( :first-child ):hover ul li ul li {
left: 240px;
top:-50px;
}
#nav li ul li ul a {
font-size: 1.25em; /* 20 */
border-top: 1px solid #e15a1f;
padding: 0.75em; /* 15 (20) */
}
#nav li ul li ul li a:hover, #nav li ul li ul:not( :hover ) li.active a {
background-color: #e15a1f;
}
but clearly it is not enough, and then I have to handle also the #media versions.
can please suggest what need to add

Answer 1

You could apply fixed widths to the dropdowns, then adjust the margins to position them correctly.
Change your code for the third level #nav li li li to this:
/* third level */
#nav li li li {
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
width: 240px; /* will also set width for child dropdown */
margin-top: -1px;
margin-left: 2px;
}
And add this for the fourth level:
/* fourth level */
#nav li li li li {
margin-left: 1px;
}