title: CSS z-index not stacking correctly
body: <p>I am having trouble with CSS z-index stacking.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Title 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropMenu"&gt;&lt;a href="#"&gt;Title 2&lt;/a&gt;
          &lt;div class="containerDropDown"&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum dolor sit met link amet ipsum link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Dolor sit amet link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Dolor sit amet link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem ipsum link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Title 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Title 4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Title 5&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>li.dropMenu {
      z-index:100;
  }
  .dropMenu:hover {   
      padding-bottom:9px;
      border:1px solid #575a5d;
      border-bottom:0;
      background-color:#434749;
      position:relative;
      -moz-box-shadow:0 0 5px #000;
      -webkit-box-shadow:0 0 5px #000;
      box-shadow:0 0 10px #000;
      z-index:100;
  }
  .dropMenu:hover a {
      padding:0 9px;
      color:#8f6f4d;
  }
  .dropMenu ul {
      width:198px;
      left:-999em;
      padding:16px 0 0 0;
      border:1px solid #575a5d;
      background-color:#434749;
      position:absolute;
      -moz-box-shadow:0 0 5px #000;
      -webkit-box-shadow:0 0 5px #000;
      box-shadow:0 0 5px #000;
  }
  .dropMenu:hover ul {
      /*top:32px;*/
      top:10px;
      left:-1px;
      z-index:20;
  }
  .dropMenu ul li {
      display:block;  
      width:100%;
      padding:0;
      z-index:70;
  }
  .dropMenu:hover ul li a,
  .dropMenu ul li a{
      display:block;
      padding:0 30px 22px 30px;
      font-size:0.8em;
      color:#d0cfcb;
      background:transparent url("/images/background/dropDownMenu-arrow.gif") no-repeat 21px 4px; 
  } 
  </code></pre>
  
  <p>I need to get <code>li.dropMenu</code> to have a higher stacking order than its child <code>ul</code>. I tried to change the z-index but with no luck. Does any one know of any solutions? I am trying to create a simple drop down menu but the child UL seems to be always on top of the parent <code>li.dropMenu</code>. </p>
  
  <p>I am giving a box-shadow to the child <code>ul</code> but because its always on top the shadow goes over the <code>li.dropMenu</code></p>