Slider stands over the submenu

Question

Guys, are you okay? I’m using the Nivo slider of jquery and I also made a menu with submenus, but when I hover over the menu to appear the submenu, this slider of jquery is on top, the submenu that should be on top of the slider. How do I fix it ?

    <nav class="menu">
        <ul class="aux">
            <li>Home
                <ul>
                    <li>ddddddddd</li>
                    <li>ddddddddd</li>
                    <li>ddddddddd</li>
                </ul>
            </li>
            <li>Empresa
                <ul>
                    <li> bbbbbbbbb
                        <ul>
                            <li>cccccccc</li>
                            <li>cccccccc</li>
                        </ul>
                    </li>
                    <li> bbbbbbbbb</li>
                    <li> bbbbbbbbb</li>
                    <li> bbbbbbbbb</li>
                </ul>
            </li>
            <li>Clientes</li>
            <li>Contato</li>
        </ul>
    </nav>

    <div id="wrapper" class="b">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="demo/images/on.jpg" data-thumb="demo/images/toystory.jpg"alt="" />
                <a href="http://dev7studios.com">
                    <img src="demo/images/up.jpg" data-thumb="demo/images/up.jpg" alt="" title="This is an example of a caption" />
                </a>
                <img
                    src="demo/images/binario.jpg" data-thumb="demo/images/walle.jpg" alt=""
                    data-transition="slideInLeft" />
                <img src="demo/images/nemo.jpg" data-thumb="demo/images/nemo.jpg"
                    alt="" title="#htmlcaption" />
            </div>
        </div>
    </div>

Answer 1

puts your (class="menu") as relative position, and adds a high z-index (normally menus always have a high z-index).

.menu { 
  position : relative;
  z-index : 99;
}

what might be rolling, is how you’re using a lib to make the slider, should have some property of it overriding the default Nav z-index, test this little guy and tell me if it worked or not.

Answer 2

You should use the z-index property of css, but I can’t show you what would be the best way to do this, because with this code ai, you can’t know what you’re using. The appropriate percentage may vary depending on the case, if it is pure html, it may be a number between 3 and 20000, if it doesn’t work, include ! Mportant, now, if you’re using something like Bootstrap, everything changes and probably z-index won’t be enough.

try:

<style>
nav > .aux > li > ul{position: absolute; z-index: 20000:!important;}
</style>

this will be enough to force the submenu to overlap the other elements of the page, at the same time this can also break your design, each case is a case, one has to know which is the problematic code to get a solution. There are different ways to do this.