Show Hide div using CSS…Z-index issue in ie7

[creativeideas]

Simply show hide div Using css.. a popdiv visible when hover on download link same with other links. but in ie7 there is some Z-index problem

My code is below (please be kind, I know I'm not very good at this), any help is appreciated.
`<table width="100%" border="0" cellspacing="0" cellpadding="0" class="product_resulttable">

  <tr>
    <td><div class="imgbox"></div></td>
    <td>DMC-ZS19K<br />

   Manual pics</td>
    <td>03 Oct,2012</td>
    <td>25,500</td>
    <td><div class="actionlist">
    <ul class="dott">
    <li><a href="#">Download</a>

    <div class="popup_div">
       first block
    </div>

    </li>
      <li><a href="#">Add to Basket</a>
       <div class="popup_div">
      second block
    </div>


      </li>
        <li><a href="#">Share</a></li>
    </ul>


    </div></td>
  </tr>
 </table>`

css:

  .actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px;    width:132px;  padding:8px 0 }
      .dott { list-style:none;  background:yellow }
   .dott li { display:block;position:relative }
   .dott li a { display:block; padding:2px 9px; color:#454545; font-size:11px; }
      .popup_div{position:absolute; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }
     div.actionlist ul li:hover > div.popup_div { display:block; }

here is jsfiddle link: http://jsfiddle.net/hjx5y/12/

@creativeideas

Simply show hide div Using css.. a popdiv visible when hover on download link same with other links. but in ie7 there is some Z-index problem

Read this regarding about z-index:

http://www.w3.org/TR/CSS21/visuren.html#z-index

Read this and used this snippet:

http://web.enavu.com/snippets/fixing-the-ie7-z-index-issue-internet-explorer-7-z-index/

or also read this and used this snippet too:

http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

[code739]

z-index is not an absolute measurement, where your specifying z-index your specifying relative
heres: your updated code but it has a lil move

     .actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px; padding:8px 0 }
.dott { list-style:none; background:yellow }
.dott li{ height:20px;}
    .dott li a { padding:2px 9px; color:#454545; font-size:11px; }
    .popup_div{position:relative; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }
    div.actionlist ul li:hover > div.popup_div { display:block; }