z-order和jQuery迷你菜单

Question

我正在尝试实现一个非常简单的小下拉式迷你菜单，当网站用户将鼠标悬停在图像上时，它将出现。图像是下载内容的链接，迷你菜单将为他们提供格式选择(平面文件与图表)。

标记：

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

   ...

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

javascript：

   <script language="javascript" type="text/javascript">

      $(document).ready(function() {
         $('.extraDownloadMenu').hover(
            function() {
               $('.down-list', this).slideDown(100);
            },
            function() {
               $('.down-list', this).slideUp(100);
            });
      });

   </script>

这样菜单就出现了--没问题。问题是表单元格非常小，当显示时，它会增长以容纳额外的内容，这当然看起来很糟糕，也不是我想要的。我想要的是让内容平滑地出现在任何内容的顶部。

什么是CSS的魔力，让这一切发生？

非常感谢。

Answer 1

将下拉菜单的位置设置为absolute，并添加一个位置为relative的包装容器。像这样：

<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>

Answer 2

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

.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);
        });
  });