title: Make nav dropdown show above all other divs
body: <p>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.  </p>
  
  <p>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? </p>
  
  <p><a href="http://jsfiddle.net/austin350s10/8b4yh3de/" rel="nofollow">Here is a example JSFiddle</a>   </p>
  
  <p>The code I am using:</p>
  
  <pre><code>&lt;header&gt;
      &lt;nav style="background-color: #FAD10E; height:50px"&gt;
      &lt;div class="menu-button"&gt;Mobile Menu&lt;/div&gt;
          &lt;ul class="flexnav" data-breakpoint="800"&gt;
              &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Stuff&lt;/a&gt;
  
              &lt;!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV --&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;Stuff 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Stuff 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Stuff 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Stuff 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Stuff 5&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Stuff 6&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="/"&gt;Stuff 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Stuff 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Stuff 4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Stuff 5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  
  
  &lt;div&gt;
      &lt;!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS --&gt;
      &lt;div class="autoplay"&gt;
          &lt;div&gt;&lt;img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>