2013-02-04 127 views
0

我想簡單的顯示隱藏div的CSS,但我的最後popdiv是不可見..在我的jscrollpane容器。Popup Div隱藏在jscrollpane

哈弗最後份額鏈路上的popdiv是不可見的

<div class=" scroll-pane"> 
     <table width="100%" border="0" cellspacing="0" cellpadding="0" class="product_resulttable"> 
      <tbody> 
      <tr> 
       <td>03 Oct,2012</td> 
      <td>25,500</td> 
      <td>xxx</td> 
      </tr> 
      <tr> 

      <td>03 Oct,2012</td> 
      <td>25,500</td> 
      <td>sdjdhdjh</td> 
      </tr> 
      <tr> 

      <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"><em></em> 
      <ul> 
      <li><a href="#">ddssdfsdffds</a></li> 
       <li><a href="#">ddssdfsdffds</a></li> 

      </ul> 

      </div> 
      </li> 
       <li><a href="#">Add to Basket</a> 


       <div class="popup_div"><em></em> 

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

      </ul> 

       </div> 

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

       <div class="popup_div"><em></em> 
      <ul> 
      <li><a href="#">ddssdfsdffds</a></li> 
       <li><a href="#">ddssdfsdffds</a></li> 
       <li><a href="#">ddssdfsdffds</a></li> 
       <li><a href="#">ddssdfsdffds</a></li> 
       <li><a href="#">ddssdfsdffds</a></li> 

      </ul> 
          </div> 

       </li> 
      </ul> 
      </div></td> 
      </tr> 
      </tbody> 
        </table> 
    </div> 

CSS:

.scroll-pane { width: 444px; height: 100px; overflow: auto; padding:20px 0 !important;} 
.product_resulttable { margin:0px 0; padding:0px; border:1px solid #000; font-size:12px; color:#606060 } 
.actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px; padding:8px 0 } 
.dott { list-style:none;} 
.dott li{ height:20px; position:relative} 
.dott li a { padding:2px 9px; color:#454545; font-size:11px; } 
div.actionlist ul li:hover > div.popup_div { display:block; } 
.popup_div{position:absolute; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none } 

我的jsfiddle鏈接:http://jsfiddle.net/sharma_pooja/CmmYj/7/

+0

有必要爲你的代碼表?我不認爲它應該。 –

+0

是需要表是這只是一個例子,我必須使用這個模塊爲我的PHP項目之一 –

回答

0

您的容器.scroll-pane具有100像素的高度。

您嘗試彈出的div沒有可以長大的空間,因爲它被容器的高度所阻止。

我將容器的高度更改爲250px。

.scroll-pane { width: 444px; height: 250px; overflow: auto; padding:20px 0 !important;}

http://jsfiddle.net/CmmYj/9/

+0

增加scrollpane的高度是不是解決方案。這只是一個例子小提琴增加高度只是刪除scrollpane我想同樣的事情發生與滾動希望你理解我的問題@ kolby –