悬停时子菜单位于主菜单后面

Question

我有 this responsive Joomla template on my site 但我无法设置下拉子菜单。它总是在主菜单和滑块后面。我已经尝试过 z-index 和相对位置，但仍然无法正常工作。有人知道为什么或我错过了什么吗？

html

<div id="nav">
<div class="inner clearfix">
    <ul class="nav menu">
        <li class="item-101 current active">Main menu 1</li>
        <li class="item-112">Main menu 2</li>
        <li class="item-147 deeper parent">Main menu 3</li>
            <ul class="nav-child unstyled small">
                <li class="item-151">Submenu 1</li>
                <li class="item-152">Submenu 2</li>
            </ul>
    </ul>
</div>

Answer 1

将此添加到您的导航：

#nav {
    z-index: 10000;
    position: relative;
}

z-index会将其推到body元素之上，z-index需要position: relative才能生效。