title: CSS - Z-index is not working with positions relative and absolute
body: <p><br> I've made dropdown menu using pure css3, but one property(z-index) is not working as I expected and that is a very big problem, because the dropdown list is dropping ABOVE the menu. Ideally it must be dropped UNDER the menu. I've tried to do something with that problem all day but unfortunately can't figure it out, so now asking for help...
  I've made a different background-colors for problem items for good seeing what i'm trying to reach. The main aim is that sub-menu with red background must be under the blue background.
  <br>
  P.S. I've already tried to make this menu with jQuery slideDown/slideUp properties but they don't look like ideal slide effect(as in my example). They look more like stretching, and that's not what I want..</p>
  
  <p><a href="https://jsfiddle.net/bwxpmgv3/" rel="noreferrer">EXAMPLE ON JSFIDDLE</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    list-style-type: none;
  }
  .menu_wrapper {
    position: relative;
    z-index: 999;
    /* IS NOT WORKING... O_o...*/
    height: 70px;
    width: 600px;
    background-color: blue;
  }
  .menu li {
    display: inline;
    float: left;
    display: table;
    height: inherit;
    margin: 3px;
    margin-top: 10px;
  }
  .menu li a {
    display: table-cell;
    font-family: Verdana;
    font-size: 16px;
    color: gold;
    text-align: center;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    background: #05487F;
    transition: .2s ease-in-out;
  }
  .sub-menu {
    position: absolute;
    z-index: 1;
    /* IS NOT WORKING... O_o...*/
    margin-top: -200px;
    margin-left: -132px;
    padding: 15px;
    padding-top: 20px;
    background-color: red;
    transition: all 1s ease-in-out;
  }
  .sub-menu li {
    float: none;
  }
  .sub-menu li a {
    padding: 5px 15px;
  }
  .menu li a:hover + .sub-menu {
    margin-top: 40px;
  }
  .sub-menu:hover {
    margin-top: 40px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="menu_wrapper"&gt;
    &lt;ul class="menu"&gt;
      &lt;li&gt;&lt;a href="about/index.html"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="news/index.html"&gt;News&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=""&gt;PROBLEM HERE&lt;br&gt;(HOVER THIS)&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
          &lt;li&gt;&lt;a href=""&gt;link 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link 2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;link 3&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Something&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Contacts&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>