Make nav dropdown show above all other divs

Question

I have a page I'm working on where currently I have 2 items. Item 1 is a flexnav jQuery navigation menu with a dropdown. Item 2 is a slick jQuery div scroller. I am trying to position the slick scroller just below the flexnav menu. The problem I'm running into though is when you hover over one of the menu items the dropdown for the sub menu is covered up by the slick scroller divs. This only seems to be happening with a screen larger than 800px as the flexnav plugin changes to a mobile friendly navigation menu on small screens.

I have tried changing the css position setting of both items but I just can't seem to figure out how to make the dropdown menus appear above the slick divs. Does anyone know what I'm doing wrong here or have any suggestions on how I could change things around to achieve what I am looking for?

Here is a example JSFiddle

The code I am using:

<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 only need to add two lines of CSS

Example fiddle

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 */
}

The position: relative allows for the element to have a z-index applied (an element must not be statically positioned, relative positioning will allow the element to display in normal document flow without having a static positioning).

The z-index: 1 provides a separate stacking context for the nav. Otherwise, because it precedes your carousel in document flow, will necessarily display beneath it when overlapped without a z-index given.

Stacking contexts apply generally only to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.