CSS Submenu Li's overlapping - css

Question

I have tried many changes but none of them work, i also search in Stackoverflow but i couldn't put it working correctly.
The 'li' inside the submenu 'ul' are overlapping in just one sub item instead of showing the 4 sub items.
The HTML:
<div id="menu">
<div class="container">
<div class="row">
<ul class="menu-list">
<li>Menu Item 1</li>
<li>Menu Item 2
<ul class="menu-sub-list">
<li>Sub-menu Item 1
<li>Sub-menu Item 2
<li>Sub-menu Item 3
<li>Sub-menu Item 4
</ul>
</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>
</div>
</div>
</div>
The CSS:
#menu {
margin: 3% 0;
background-color: rgb(255,138,61);
height: 70px;
}
#menu ul.menu-list {
list-style: none;
text-align: center;
line-height: 70px;
height: 70px;
display:block;
clear:both;
}
#menu ul.menu-list li {
display: inline-block;
padding: 0 20px;
text-transform: uppercase;
font-size: 1.05em;
height: 70px;
position:relative;
}
#menu ul.menu-list li:hover {
background-color: rgb(255,102,0);
}
#menu a {
color: #fff;
text-decoration: none;
display:block;
}
#menu ul.menu-list ul.menu-sub-list {
display: none;
}
#menu ul.menu-list li:hover > ul {
display: block;
}
#menu ul.menu-list > li > ul > li {
overflow: hidden;
display: block;
width: 100%;
padding: 10px;
text-transform: uppercase;
font-size: 1.05em;
height: 70px;
position: absolute;
top: 100%;
left: 0px;
z-index: 1;
background: #f2f2f2;
float: none;
}

Answer 1

It's because each sub-navigation element has position: absolute; in your code, making them overlap. Only the submenu wrapper needs to be position: absolute;
http://jsfiddle.net/8kzxyj3g/
#menu {
margin: 3% 0;
background-color: rgb(255,138,61);
height: 70px;
}
#menu ul.menu-list {
list-style: none;
text-align: center;
line-height: 70px;
height: 70px;
display:block;
clear:both;
top: 100%;
}
#menu ul.menu-list li {
display: inline-block;
padding: 0 20px;
text-transform: uppercase;
font-size: 1.05em;
height: 70px;
position:relative;
}
#menu ul.menu-list li:hover {
background-color: rgb(255,102,0);
}
#menu a {
color: #fff;
text-decoration: none;
display:block;
}
#menu ul.menu-list ul.menu-sub-list {
display: none;
position: absolute;
top: 100%;
}
#menu ul.menu-list li:hover > ul {
display: block;
}
#menu ul.menu-list > li > ul > li {
overflow: hidden;
display: block;
width: 100%;
padding: 10px;
text-transform: uppercase;
font-size: 1.05em;
height: 70px;
left: 0px;
z-index: 1;
background: #f2f2f2;
float: none;
}