CSS position absolute and width of parent container in percent

You have forgotten two elements for display 100%.

Correction here

1st elements forgets it's : Position relative on level_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    **position:relative;**
}

2nd elements corrections it's : change size of 2nd li

.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

With "width:100%" on .level_2 it automatically turns out with the width of its parent.

Add position:relative to level_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    position:relative;
}