Question

I have a few divs arranged horizontally that acts as buttons on a navigation bar. When this button is clicked, a hidden submenu div will be made visible below the button that was clicked, but above all the other buttons.

Problem: The submenu div that appears stayed above all the other button divs even though the z-index if the button div that was clicked was changed to be larger than the submenu div’s z-index. Will be great to have some help with this! 🙂

HTML Code

<div class="filter_tab" id="filter_tab_rent"><p>Min/Max Rent</p></div>
    <div id="filter_submenu_rent">
        Hello
</div>

jQuery Code

$("#filter_tab_rent").click(function(e) {
    $("#filter_tab_rent").toggleClass('filter_tab_selected');
    $("#filter_submenu_rent").toggle();
});

CSS Code

.filter_tab {
    height: 38px;
     min-width: 50px;
     border: 1px solid #D9D9D9;
     border-bottom: none;
     float: left;

}

.filter_tab_selected {
    z-index: 500
}

#filter_submenu_rent {
    width: 300px;
    height: 50px;
    background: #FFF;
    position: absolute;
    top: 65px;
    display: none;
    z-index: 100;
    border: 1px solid #D9D9D9;
    box-shadow: 0px 2px 5px #888;

}

Additional Info: I’m using Chrome to view this.

Answer 1

z-index will only work with elements position relative and absolute. Add a position to your .filter_tab_selected style.