title: Z-index dropdown menu issue
body: <p>Well hello there..</p>
  
  <p>Can anyone tell me what to do when z-index is not working??? </p>
  
  <p>All elements are in absolute and relative position but it doesn't respond to any value.</p>
  
  <pre><code>&lt;div id="main-menu" class="menu-main-container"&gt;
  &lt;ul id="menu-main" class="menu"&gt;
      &lt;li id="nav-menu-item-11" class=" menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"&gt;&lt;a href="http://localhost/" class="menu-link main-menu-link"&gt;Home&lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li id="nav-menu-item-10" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"&gt;&lt;a href="http://localhost/?page_id=7" class="menu-link main-menu-link"&gt;Shortcodes&lt;/a&gt;
  
          &lt;ul class="menu-depth-1"&gt;
              &lt;li id="nav-menu-item-374" class=" menu-item menu-item-type-post_type menu-item-object-page"&gt;&lt;a href="http://localhost/?page_id=7" class="menu-link sub-menu-link"&gt;Shortcodes&lt;/a&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="nav-menu-item-125" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-35 current_page_item menu-item-has-children"&gt;&lt;a href="http://localhost/" class="menu-link main-menu-link"&gt;#35 (no title)&lt;/a&gt;
  
          &lt;ul class="menu-depth-1"&gt;
              &lt;li id="nav-menu-item-376" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"&gt;&lt;a href="http://localhost/?page_id=7" class="menu-link sub-menu-link"&gt;Shortcodes&lt;/a&gt;
  
                  &lt;ul class="menu-depth-2"&gt;
                      &lt;li id="nav-menu-item-377" class=" menu-item menu-item-type-post_type menu-item-object-page"&gt;&lt;a href="http://localhost/?page_id=7" class="menu-link sub-menu-link"&gt;Shortcodes&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="nav-menu-item-333" class=" menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children"&gt;&lt;a href="http://localhost" class="menu-link main-menu-link"&gt;Blog&lt;/a&gt;
  
          &lt;ul class="menu-depth-1"&gt;
              &lt;li id="nav-menu-item-130" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children"&gt;&lt;a href="http://localhost/?page_id=116" class="menu-link sub-menu-link"&gt;blog 1&lt;/a&gt;
  
                  &lt;ul class="menu-depth-2"&gt;
                      &lt;li id="nav-menu-item-375" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children"&gt;&lt;a href="http://localhost/?page_id=2" class="menu-link sub-menu-link"&gt;Sample Page&lt;/a&gt;
  
                          &lt;ul class="menu-depth-3"&gt;
                              &lt;li id="nav-menu-item-378" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-35 current_page_item"&gt;&lt;a href="http://localhost/" class="menu-link sub-menu-link"&gt;#35 (no title)&lt;/a&gt;
  
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>        .parent-main-menu {
          background-color: #0c8fff;
          min-width: 200px;
          float: left;
      }
  
      #main-menu ul {
          list-style-type: none;
      }
  
      #main-menu ul li a {
          padding: 10px 15px;
          display: block;
          color: #fff;
          text-decoration: none;
      }
  
      #main-menu ul li a:hover {
          background-color: #007ee9;
      }
  
      #main-menu ul li:hover &gt; ul {
          left: 100%;
          -webkit-transition: left 300ms ease-in;
          -moz-transition: left 300ms ease-in;
          -ms-transition: left 300ms ease-in;
          transition: left 300ms ease-in;
      }
  
      #main-menu ul li &gt; ul {
          position: absolute;
          background-color: #333;
          top: 0;
          left: -200px;
          min-width: 200px;
          height: 100%;
          -webkit-transition: left 300ms ease-in;
          -moz-transition: left 300ms ease-in;
          -ms-transition: left 300ms ease-in;
          transition: left 300ms ease-in;
      }
  
      #main-menu ul li &gt; ul li a:hover {
          background-color: #007ee9;
      }
  
      .menu {
          z-index: 400;
          position: relative;
      }
  
      .menu-depth-1 {
          z-index: 300;
          position: absolute;
      }
  
      .menu-depth-2 {
          z-index: 200;
          position: absolute;
      }
  
      .menu-depth-3 {
          z-index: 100;
          position: absolute;
      }
  </code></pre>
  
  <p>Here is a fiddle of my menu!</p>
  
  <p><a href="http://jsfiddle.net/kcgCX/180/" rel="nofollow noreferrer">http://jsfiddle.net/kcgCX/180/</a></p>
  
  <p>Thank you in advance.</p>