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

Question

我有带顶部菜单的粘性顶栏。菜单包含许多元素，因此在屏幕尺寸有限的情况下，其余元素无法访问。我尝试将溢出添加到菜单的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的样式。

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

选项一：添加您最初想要完成的滚动条。它是可行的，但我不确定它是否有助于提供良好的用户体验。 橙色箭头指向滚动条。

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

选项三：标记稍微多一点，但它会将读取顺序保持在第一列，然后保持在第二列。 橙色箭头表示使用选项三从左到右的阅读顺序。

当然，对于选项二和选项三，您可以将其扩展为您想要的任意数量的列，并且您将需要媒体查询以确保样式仅影响断点之上的屏幕大小。

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

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