Make nav popup above all other divs

Question

I have a page I'm working on, where I currently have 2 elements. Item 1 is a flexnav jQuery navigation menu with a drop down menu. Point 2 is the jQuery smoothing scroller. I am trying to put a spot scroller just below the flexnav menu. The problem that I am facing is that when you hover over one of the menu items, the drop-down menu for the submenu is covered with spots of scrollers. This seems to only happen with a screen larger than 800 pixels, as the flexnav plugin turns into a mobile navigation menu on small screens.

I tried to change the css position setting for both elements, but I just can't figure out how to make the drop-down menu above the spots above the div. Does anyone know what I'm doing wrong here, or are there suggestions on how I can make a difference to achieve what I'm looking for?

Here is a JSFiddle example

The code I'm using is:

<header>
    <nav style="background-color: #FAD10E; height:50px">
    <div class="menu-button">Mobile Menu</div>
        <ul class="flexnav" data-breakpoint="800">
            <li><a href="">Home</a></li>
            <li><a href="">Stuff</a>

            <!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV -->
              <ul>
                <li><a href="">Stuff 1</a></li>
                <li><a href="">Stuff 2</a></li>
                <li><a href="">Stuff 3</a></li>
                <li><a href="">Stuff 4</a></li>
                <li><a href="">Stuff 5</a></li>
                <li><a href="">Stuff 6</a></li>
              </ul>
            </li>
            <li><a href="/">Stuff 2</a></li>
            <li><a href="">Stuff 3</a></li>
            <li><a href="">Stuff 4</a></li>
            <li><a href="">Stuff 5</a></li>
        </ul>
    </nav>
</header>


<div>
    <!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS -->
    <div class="autoplay">
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"></div>
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"></div>
        <div><img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"></div>
    </div>
</div>

Answer 1

You need to add two lines of CSS

Violin example

CSS

.flexnav{
    -webkit-padding-start: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width:90%;
    position: relative; /* <-- Added */
    z-index: 1; /* <-- Added */
}

position: relativeallows the element to have a z-index application (the element should not be statically positioned, relative positioning allows the element to be displayed in a normal document stream without positioning static).

z-index: 1 . , , z-index.

, . z-index .