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:

```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;

}
```

```html
<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