jquery - Popup Div隐藏在jscrollpane中

Question

我想要显示隐藏 div 的简单 css，但我的最后一个 popdiv 在我的 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/

Answer 1

您的容器 .scroll-pane 的高度为 100px。

您尝试弹出的 div 没有向下增长的空间，因为它被容器的高度阻止了。

我将容器的高度更改为 250px。

.scroll-pane { 宽度:444px;高度:250px；溢出:自动； padding:20px 0 !important;}

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