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


      CSS Howto..

      HTML/CSS: How to make “password” input show the password?

      ExtJS how to set button css by using pressedCls config

      How to centre a div vertically and horizontallly?

      CSS: How to position two elements on top of each other, without specifying a height?

      Showing/hiding elements inside a div block with HTML and CSS

      JavaScript: how do I make a tooltip follow the cursor *and* flip on collision?

      How to fix my nav bar? Positioning is different on different screens

      How do I access separate points/sections on a single image in html/javascript?

      css how to prevent content from drifting underneath fixed position areas?

      How Do I Make My CSS Slider Auto Play? [closed]

      How to vary shade of specific table row id

      HTML table-cell how to set width

      How to add classes to div using jquery in sequence like animation

      How to make a CSS border for a dropdown menu?

      How can I create facebook style vertical border line (layout)? :)

      How to set the css style display property in json success function

      How to design the vertical scroll bar or customize the vertical scroll bar design?

      How to center smaller text with bigger css

      How to disable Cufon on certain elements?

      How to use -webkit-appearance: searchfield-results-decoration?

      How can I make an arrow on an instruction box on the right move to point to the field on the left that is in focus?

      How to debug CSS/Javascript hover issues

      How to make a list float to the right in CSS?

      How is the force reload of javascript/css done in Symfony?

      How to make highlighted table with rowspan

      How to make the first column of a table invisible?

      How to vertically align both image and text side by side in a div

      Wordpress top menu link to show/hide div

      SMACSS and BEM: How to position Module inside of a Module?

      How to remove last TD in first LINE