CSS Submenu Li's overlapping

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><a href="#">Menu Item 1</a></li>
                        <li><a href="#">Menu Item 2</a>
                            <ul class="menu-sub-list">
                                <li><a href="#">Sub-menu Item 1</a>
                                <li><a href="#">Sub-menu Item 2</a>
                                <li><a href="#">Sub-menu Item 3</a>
                                <li><a href="#">Sub-menu Item 4</a>
                            </ul>
                        </li>
                        <li><a href="#">Menu Item 3</a></li>
                        <li><a href="#">Menu Item 4</a></li>
                        <li><a href="#">Menu Item 5</a></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;
}