title: CSS z-index cross-browser issue for links inside a absolutely positioned DIV
body: <p>Please see <a href="http://jsfiddle.net/mithun/nuF2Q/1/" rel="nofollow">http://jsfiddle.net/mithun/nuF2Q/1/</a></p>
  
  <p>I've the HTML structure  </p>
  
  <pre><code>&lt;div id='slider'&gt;
      &lt;ul&gt;
          &lt;li&gt; 
              &lt;a class='pride' href="i1.html"&gt; Item 1 &lt;/a&gt;
              &lt;div class='info'&gt; 
                  &lt;a class='roar' href="i1.html"&gt; Description 2 &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt; 
              &lt;a class='pride' href="i2.html"&gt; Item 2 &lt;/a&gt;
                          &lt;div class='info'&gt; 
                  &lt;a class='roar' href="i1.html"&gt; Description 1 &lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class='pride' href="i3.html"&gt; Item 3 &lt;/a&gt;
               &lt;div class='info'&gt; 
                  &lt;a class='roar' href="i1.html"&gt; Description 3 &lt;/a&gt;
              &lt;/div&gt;
             &lt;/li&gt;
          &lt;li&gt;
              &lt;a class='pride' href="i4.html"&gt; Item 4 &lt;/a&gt; 
                          &lt;div class='info'&gt; 
                  &lt;a class='roar' href="i1.html"&gt; Description 4 &lt;/a&gt;
              &lt;/div&gt;
           &lt;/li&gt;
      &lt;/ul&gt;
   &lt;div&gt;
  </code></pre>
  
  <p>and CSS </p>
  
  <pre><code>#slider {
      width : 400px;
      height: 100px;
      border: 1px solid #bcd;
      background-color: #def;
      position:relative;
      z-index:0 !important;
  }
  
  #slider ul{
      margin:0px;
      padding:0px;
      list-style:none;
  }
  
  #slider ul li {
      margin:0px;
      padding:0px
      list-style:none;
      width:100px;
      z-index:10;
  }
  #slider ul li a.pride {
      color: #333;
      display: block;
      text-decoration: none;
      padding: 2px 0px 2px 10px;
  }
  #slider ul li.active a.pride,
  #slider ul li:hover a.pride {
      background-color: #ffff7c;
  }    
  
  #slider ul li div.info {
      background-color: #9ab;
      border: 1px solid #ccc;
      display:none;
      position:absolute;
      right: 0;
      top:0;
      z-index:-5;
  }
  #slider ul li.active div.info,
  #slider ul li:hover div.info {
      display:block;
  }
  #slider ul li div.info a.roar{
      color: #0a0;
      display:block;
      width: 280px;
      height: 80px;
      padding: 10px 10px 10px 30px;
      text-decoration: none;
      z-index:10;
  }
  </code></pre>
  
  <p>Issue is links inside the Div's are not click able, actually they are behind the UL  </p>
  
  <p>-- update</p>
  
  <p>It happens only in Webkit/Gecko browsers</p>
  
  <p>Opera and IE are displaying it correctly </p>