0

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/

3
Contributors
2
Replies
8
Views
4 Years
Discussion Span
Last Post by code739
2

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; }
Votes + Comments
Nice work!
thnks a ton ! u save my day
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.