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>

所以菜单出现 - 没问题。问题是表格单元格非常小，并且当＆lt; ul＆gt;时，它会增长以容纳附加内容。得到显示，当然看起来很糟糕，不是我想要的。我想要的是让内容顺利出现在任何内容之上。

使这种情况发生的CSS魔法是什么？

非常感谢。

Answer 1

将下拉列表的位置设置为绝对值，并添加一个位置为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);
        });
  });

CSS，z-order，＆amp;一个jQuery迷你菜单

2 个答案: