z-index popup div issue in ie7

[qbn720]

I have a page i use simple jquery of show hide div . a popdiv visible when hover on download link. but in ie7 there is some Z-index problemMy code is below (please be kind, I know I'm not very good at this), any help is appreciated. \[code\]<script>var js = jQuery.noConflict();js(document).ready( function() { js(".popup_div").hide(); js(".dott li, .popup_div").mouseover(function() {js(".popup_div").show();});js(".dott li, .popup_div").mouseout(function() {js(".popup_div").hide();});});</script><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="http://stackoverflow.com/questions/14521919/#">Download</a> <div class="popup_div"><em></em> </div> </li> <li><a href="http://stackoverflow.com/questions/14521919/#">Add to Basket</a> </li> <li><a href="http://stackoverflow.com/questions/14521919/#">Share</a></li> </ul> </div></td> </tr> </table>\[/code\]CSS\[code\].product_resulttable { margin:0px 0; padding:0px; border-collapse:collapse; font-size:12px; color:#606060; position:relative; z-index:1; border:1px solid #000; }.actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px; padding:8px 0 }.dott { list-style:none; position:relative; z-index:1; background:yellow }.dott li { display:inline-block; position:relative }.dott li a { display:inline-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; }\[/code\]here is the fiddle: http://jsfiddle.net/hjx5y/5/