title: z-index is not working for navigation bar
body: <p>I have a drop-down CSS menu. The drop down <code>&lt;div&gt;</code> should start above the page, behind my fixed navigation bar and when a navigation button is "moused over". It uses a CSS transition to move the submenu down the page, making it visible.</p>
  
  <p>The problem is.. it keeps rendering the submenu above my navigation bar (in terms of z-index). I need it to render behind the navigation bar.</p>
  
  <p><a href="http://www.obsojb.com" rel="nofollow">Click here to see the webpage</a>
  (The page is intentionally aligned to the left for now - ignore this)</p>
  
  <p>Here is how the HTML is layed out: </p>
  
  <pre><code>&lt;div id="nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="/"&gt;Title 1&lt;/a&gt;&lt;/li&gt; &lt;!-- has no submenu --&gt;
      &lt;li&gt;&lt;a href="/"&gt;Title 2&lt;/a&gt;
        &lt;div&gt;
          &lt;!-- Submenu Content --&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my CSS:</p>
  
  <pre><code>#nav {
      position:absolute;
      width:&lt;?php echo ($navbutwidth*$numititles)+($numititles-1); ?&gt;px;
      background-color:&lt;?php echo $colnavbg; ?&gt;;
      z-index:5 !important;
  }
  #nav ul {
      list-style-type:none;
      margin:0;
      padding:0;
      overflow:hidden;
      width:&lt;?php echo $navbarwidth; ?&gt;px;
      z-index:3 !important;
  }
  #nav ul li {
      float:left;
  }   
  #nav ul li &gt; a {
      width:&lt;?php echo ($navbutwidth-16); ?&gt;px;
      height:&lt;?php echo $navbutheight; ?&gt;px;
      line-height:&lt;?php echo $navbutheight; ?&gt;px;
      display:block;
      text-decoration:none;
      border-left:1px Solid &lt;?php echo $colnavbutborder; ?&gt;;
      padding-left:15px;
      background-color:&lt;?php echo $colnavbutbg; ?&gt;;
      color:&lt;?php echo $colnavbuttxt; ?&gt;;
      border-radius:10px 10px 0px 0px;
  }   
  #nav ul li &gt; a:hover {
      background-color:&lt;?php echo $colnavbutbghov; ?&gt;;
      color:&lt;?php echo $colnavbuttxthov; ?&gt;;
  }   
  #nav ul li &gt; div {
      position:absolute;
      top:-&lt;?php echo $navsubbutheight-$navbutheight; ?&gt;px;
      left:0px;
      width:&lt;?php echo $navsubbutwidth; ?&gt;px;
      height:&lt;?php echo $navsubbutheight-1; ?&gt;px;
      text-align:left;
      display:block;
      padding:0;
      background-color:&lt;?php echo $colsubnavbutbg; ?&gt;;
      border-top:1px Solid #FFF;
      border-bottom:1px Solid #FFF;
      z-index:1 !important;
      -webkit-transition:all 0.2s ease-in-out;
      -ms-transition:all 0.2s ease-in-out;
      transition:all 0.2s ease-in-out;
  }   
  #nav ul li:hover &gt; div {
      top:&lt;?php echo $navbutheight; ?&gt;px;
      display:block;
  }
  #nav ul li &gt; div:hover {
      background-color:&lt;?php echo $colnavbutbghov; ?&gt;;        
  }
  </code></pre>