Q:

How to display () menu items over divs - z-index not working

I am using a ul & li a bit like a select dropdown to trigger a JS function (not shown).
It's working fine - except the menu items appear BEHIND divs that are shown below them.
I've mocked up the problem here: http://jsfiddle.net/bf8ugef7/1/
I'm fiddling with z-index and position:absolute but can't see how to make it work.
Can anyone help?
Here is the HTML and CSS:

body {
 font-family: sans-serif;
 color: gray;
 font-weight: 100;
}

div, li {
 -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


li {
 color: #333333; 
 text-decoration: none;
 /* background-image: url("images/mullion.gif"); */
}


div.images {
 border: 1px solid #555555;
 /* padding-left: 5px; */
 width: 100%;
 float: left;
 clear: left;
 margin-bottom: 20px;
/*
 background-image: url("images/iMullion.gif");
 background-repeat: no-repeat;
*/
}




div.lowerText {
 width: 100%;
}

div.btn {/* +filter */
 float: right;
 width: 195px;
 cursor: default;
 text-align: right;
 /* margin-left: 1px; */
 display: inline-block;
}

div.btn1 {
 float: left;
 width: 153px;
 cursor: default;
 text-align: center;
 margin-left: 1px;
 display: inline-block;
 position: absolute;
 color: black;
 background-color: #79c1ee;
 left: 182px;
 
}

div.btn2 {
 float: left;
 width: 20px;
 display: inline-block;
 color: white;
 font-weight: 100;
 text-align: center;
 background-color: white;
 cursor: default;
 position: absolute;
 left: 162px;
 z-index: 100;
 
}


div.btn2 ul {
 list-style: none;
 position: absolute;
 display: block;
 margin: 0px;
 padding: 0px;
 z-index: 100;
}

div.btn2 ul li {
 display: none;
 cursor: pointer;
 
 color: white;
 height: 25px;
 background-color: #79c1ee;
 margin-top: 1px;
 z-index: 100;
}

div.btn2 ul li:first-child {
 margin-top: 0px;
 display: inline-block;
 width: 20px;
 z-index: 100;
}

div.btn2 ul:hover {
 height: 200px;
}

div.btn2 ul:hover li {
 display: block;
 z-index: 100;
}

div.btn2 ul li:hover {
 background-color: #13A3E2;
 z-index: 100;
}

/*
div.btn2 ul li:hover {
 display: block;
 width: 20px;
 height: 100px;
}
*/

div.btn3 {
 margin-left: 1px;
 float: left;
 width: 20px;
 display: inline-block;
 vertical-align: top;
 text-align: center;
 font-weight: 400;
 color: white;
 background-color: #13A3E2; 
 position: absolute;
 left: 336px;
 cursor: pointer;
}

div.btn3:hover {
 background-color: red;
}

div.btn4 {
 /* border: 1px solid black; */
 padding-left: 5px;
 float: left;
 width: 153px;
 display: inline-block;
 color: #444444;
 cursor: default;
 background-color: white; 
}



div.attr {
 padding-left: 5px;
 color: #444444;
 background-color: #79C1ED;
 float: right;
 clear: none;
 display: inline-block;
 text-align: left;
}


div.filters {
 width: 100%;
 line-height: 1.8;
 overflow: hidden;
 display: block;
 font-size: 14px;
 text-decoration: none;
 float: left;
}






div.toptext {
 line-height: 2.2;
 display: block;
 max-height: 35px;
 color: #444444;
 background-color: #555555;/* matches border color */
 color: white;
 width: 100%;
 padding-left: 5px;
 cursor: not-allowed;
 /* border: 1px solid pink; */
}

div.leftnav {
 width: 350px;
 float: left;
 clear: left;
}

div#container {
 padding: 0px;
 margin: 0px;
 
}
<div class="leftnav">
    <div class="images">
        <div class="toptext">Filters
            <div class="btn">+ filter</div>
        </div>
        <div id="container">
            <div class="filters rem" id="f12">
                <div class="btn4" id="b4f12">Pupil name</div>
                <div class="btn2" id="b2f12">
                    <ul>
                        <li id="ddf_12_0">=</li>
                        <li id="ddf_12_1">></li>
                    </ul>
                </div>
                <div class="btn1" id="b1f12">Joe Bloggs</div>
                <div class="btn3" id="if12">x</div>
            </div>
            <div class="filters rem" id="f13">
                <div class="btn4" id="b4f13">Pupil name</div>
                <div class="btn2" id="b2f13">
                    <ul>
                        <li id="ddf_13_0">=</li>
                        <li id="ddf_13_1">></li>
                    </ul>
                </div>
                <div class="btn1" id="b1f13">Bill Clinton</div>
                <div class="btn3" id="if13">x</div>
            </div>
        </div>
    </div>
</div>

Thanks
Emma

A:

@  Claudiu  Yes it should be comment, but i dont have enough points to add comments
div.btn2 {
        width: 20px;
        display: inline-block;
        color: white;
        font-weight: 100;
        text-align: center;
        cursor: pointer;
        left: 162px;
    }

    div.btn2 ul {
        display: block;
        margin: 0;
        padding: 0;
    }

    div.btn2 ul li {
        display: none;
        cursor: pointer;
        color: white;
        height: 25px;
        background-color: #79c1ee;
    }

    div.btn2 ul li:first-child {
        display: inline-block;
        width: 20px;
    }

    div.btn2:hover li {
        display: block;
        position: absolute;
        width: 20px;
        background: #000;
    }

    div.btn2:hover li:first-child {
        position: relative;
    }

    div.btn2 ul li:hover {
        background-color: #13A3E2;
    }

i have updated the fiddle

