0

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

标记：

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

所以菜单出现了 - 没问题。问题是表格单元格非常小，当 <ul> 显示时它会增长以容纳额外的内容，这当然看起来很糟糕而且不是我想要的。我想要的是让内容顺利地出现在任何内容之上。

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

非常感谢。

4

2 回答 2

1

将下拉菜单的位置设置为绝对，并添加一个相对位置的包装容器。像：

<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>
于 2009-08-10T19:48:48.323 回答
1

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

.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);
        });
  });
于 2009-08-10T19:52:13.760 回答