CSS、z顺序和；jQuery小菜单

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

标记：

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

ol，ul
{
列表样式：无；
}
.下拉列表
{
位置：相对位置；
左：0px；
顶部：0px；
z指数：2；
}
...

数据文件
图表

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>

$（文档）.ready（函数（）{
$（'.extraDownloadMenu'）。悬停(
函数（）{
$（'.down list'，this）.slideDown（100）；
},
函数（）{
$（'.down list'，this）.slideUp（100）；
});
});

于是菜单出现了——没问题。问题是表格单元格非常小，当显示

时，它会增长以容纳额外的内容，这当然看起来很糟糕，这不是我想要的。我想要的是内容平滑地出现在任何内容的顶部
CSS的魔力是什么

---

非常感谢。
将下拉列表的位置设置为绝对，并添加一个包装容器，其位置为相对。比如：

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

ol，ul{
列表样式：无；
}
.下拉列表{
位置：绝对位置；
左：0px；
顶部：0px；
z指数：2；
}
.下拉列表包装器{
位置：相对位置；
}
...

数据文件
图表

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

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

现在，不利的一面是列表可能不会在您想要的地方弹出。但没关系，我们可以使用jQuery在每次显示时帮助我们定位它。类似于（未经测试）：

---

因此，菜单总是保持相同的大小，额外的内容将减少各自的大小？这都要归功于两者。我喜欢Chris的解决方案，因为我不需要用代码定位任何东西。将其包装到另一个div中可以达到相同的效果。

  $(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);
        });
  });