title: Drop Down Menu hidden behind the slider
body: <p>The drop down menu is hidden behind the slider on chrome. I haven't checked internet explorer yet. I've tried setting the main menu and submenu with position:relative and high z-index, and the slider wrapper as position: relative and low z-index. However, it's still not working. </p>
  
  <p>The website I'm working on is: <a href="http://www.scraptsy.com" rel="nofollow">http://www.scraptsy.com</a></p>
  
  <p>Slider_wrapper </p>
  
  <pre><code>.rev_slider_wrapper {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 1;
      position:relative;
  }
  .tp-bannertimer {
      z-index: 20!important;
  }
  .rev_slider iframe {
      z-index: 100;
  
  }
  </code></pre>
  
  <p>Main Menu</p>
  
  <pre><code>#header-section &gt; #main-nav {
      border-top: 1px solid #e4e4e4;
      /*background: url('images/triangular.png');*/
      background-color: #C17B48;
      border-top: 1px solid #E25879 !important;
      border-bottom: 1px solid #E25879 !important;
      position: relative;
      z-index: 2000;
  }
  
  #header-section #main-nav, #header-section #main-nav .sub-menu, #header-section #main-nav .sub-menu ul, #header-section #main-nav .sub-menu li,  #header-section #main-nav .sub-menu li a{
      z-index: 100000 !important;
  }
  </code></pre>