How to display (<li>) menu items over divs – z-index not working

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

Tags: html,css,z-index

Problem :

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

Solution :

@ 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