css - 如何向 Zurb Foundation 下拉菜单添加溢出？

Question

我有带下拉菜单的 sticky-top 栏。该菜单包含许多元素，因此在有限的高度屏幕尺寸下，无法访问其余元素。我尝试将溢出添加到菜单的 ul，如下所示:

    <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">     
          <li class="has-dropdown">
            <a href="#"><?php echo lang('Choose Source');?></a>
<!-- Adding overflow -->
            <ul class="dropdown" style="overflow: scroll">  

但是，它只是呈现一个禁用的滚动条，如屏幕截图所示:

是否有任何解决方案或替代解决方法？

我使用 Foundation 5。

Answer 1

当您的 CSS 在设置 overflow: scroll; 后只显示一个禁用的滚动条时，这表明没有设置对象的高度。由于您正在处理 Foundation top-bar，因此您需要设置高度并使用 !important 以覆盖它们的 height: auto !important 样式。

由于您对替代方案持开放态度，我建议将您的长下拉列表转换为多列。我创建了一个代码笔示例 here .

选项一:添加您最初想要完成的滚动条。这是可行的，但我不确定它是否会带来良好的用户体验。 橙色箭头指向滚动条。

选项二:是一个简单的两列，使用下拉菜单自然向左浮动，因此几乎没有额外的标记。选项二可能有缺点，具体取决于您希望阅读顺序如何。 橙色箭头表示使用从左到右和选项二的阅读顺序。

选项三:标记更多一些，但它使阅读顺序保持在第一列和第二列之间。 橙色箭头表示使用从左到右的阅读顺序和选项三。

当然，对于选项二和选项三，您都可以将其扩展为任意多的列，并且您将需要一个媒体查询来确保样式仅影响断点上方的屏幕尺寸。

如果我误解了您的问题，请随时澄清并提供 codepen或 jsfiddle到您的 PHP 生成的 HTML。

如果您有任何问题，请告诉我。