css、z-order和a jquery迷你菜单

将下拉列表的位置设置为绝对,并添加一个具有相对位置的包装容器。像:

<style>
    ol, ul {
     list-style: none;
    }
    .down-list {
     position:absolute;
     left:0px;
     top:0px;
     z-index:2;
    }
    .down-list-wrapper {
     position:relative;
    }
</style>

...

<td>
    <div class="extraDownloadMenu"><img src="/AppName/Images/Icons/Download_15.gif" />
     <div class="down-list-wrapper">
         <ul class="down-list" style="display:none;">
            <li>Data file</li>
            <li>Chart</li>
         </ul>
     </div>
    </div>
</td>

避免容器增长以适应弹出窗口的最佳方法是使用绝对位置而不是相对位置:

.down-list
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:2;
}

现在,这个列表的下半部分可能不会弹出到您想要的地方。但没关系,我们可以使用jquery在每次显示时帮助我们定位它。类似(未测试的):

  $(document).ready(function() {
     $('.extraDownloadMenu').hover(
        downloadMenu = $(this);
        function() {
           $('.down-list', this)
               .css({left: downloadMenu.offset().left, top: downloadMenu.offset().top + $(this).height()})
               .slideDown(100);
        },
        function() {
           $('.down-list', this).slideUp(100);
        });
  });