2013-02-04 1 views
0

show hide 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 링크 : 100 픽셀의 높이가 .scroll-panehttp://jsfiddle.net/sharma_pooja/CmmYj/7/

+0

해당 테이블은 코드에 필요한가요? 나는 그것이해야한다고 생각하지 않는다. –

+0

예 테이블이 필요합니다.이 예제는 PHP 프로젝트의 하나 인이 모듈을 사용해야합니다. –

답변

0

컨테이너.

팝업하려고하는 div는 컨테이너 높이에 의해 멈추어 져서 성장할 여지가 없습니다.

컨테이너 높이를 250px로 변경했습니다.

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

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

+0

스크롤 패널 높이를 높이는 것은 해결책이 아닙니다. 이 예제는 피들 높이를 높이는 것입니다. scrollpane을 제거하십시오. scrollpane과 같은 일이 일어나기를 바랍니다. 내 문제를 이해합니다. @ kolby –