Search code examples
cssresponsive-designhoverz-indexsubmenu

Submenu is behind main menu on hover

I have this responsive Joomla template on my site and I can't able to set dropdown submenu. It's always behind main menu and also behind the slider. I've already tried z-index and relative position, but still not working. Does anybody know why or what did I miss?

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>

Solution

  • Add this to your nav:

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

    The z-index will push it above the body element, the position: relative is needed for the z-index to take effect.