Javascript Z-指数&；jQuery切换

我有几个水平排列的div，充当导航栏上的按钮。单击此按钮时，隐藏的子菜单div将显示在单击的按钮下方，但在所有其他按钮上方

问题：如果单击的按钮div更改为大于子菜单div的

z-index

，则显示的子菜单div仍位于所有其他按钮div之上。如果能在这方面得到一些帮助，那就太好了！：）

HTML代码

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

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

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

CSS代码

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

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

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

}

}

---

其他信息：我正在使用Chrome查看此内容。

z-index仅适用于元素相对位置和绝对位置。将位置添加到所选样式的.filter\u选项卡中