title: z-index not working on drop down menu
body: <p>I have a drop down menu which has the following html structure:</p>
  
  <pre><code>&lt;ul class="menu"&gt;
     &lt;li&gt;&lt;a href=""&gt;Menu Item 1&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
           &lt;li&gt;&lt;a href=""&gt;Sub Menu Item 1&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>and I have the following css rules:</p>
  
  <pre><code>.menu {float:left}
  .menu &gt; li {position:relative; float:left}
  .menu &gt; li &gt; a {display:block}
  .sub-menu {display:none; z-index:100; position:absolute; top:40px; width:180px;}
  </code></pre>
  
  <p>I'm using javascript to show the drop down menu.</p>
  
  <p>The issue I have is that the sub-menus are appearing below a slideshow which I have close to the navigation. No matter how high or how low I set the z-index of .sub-menu, nothing changes.</p>
  
  <p>Does anyone know what could possibly trigger z-index to not work at all?</p>
  
  <p>Thanks.</p>
  
  <p>EDIT: The issue is with all browsers. Testing in Firefox, Chrome and Internet Explorer</p>