Css 如何向ZURB基金会下拉菜单添加溢流？

我有带下拉菜单的粘性顶部栏。菜单包含许多元素，因此在有限的高度屏幕大小中，无法访问其余元素。我尝试将溢出添加到菜单的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">  

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

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

---

<强>我使用基础5。< /强>

当您的CSS在设置<代码>溢出：滚动时，显示一个禁用滚动条；<代码>表示未设置对象上的高度。由于您正在处理基础顶栏，您需要设置高度并使用<代码>！重要信息以覆盖其高度：自动的样式！重要信息

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

选项一：添加一个滚动条，就像您最初想要完成的一样。这是可行的，但我不确定它是否适合于良好的用户体验。橙色箭头指向滚动条

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

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

当然，对于选项二和选项三，您可以根据需要将其扩展为任意多的列，并且需要进行媒体查询，以确保样式只影响断点上方的屏幕大小

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

---

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

谢谢。我更喜欢1号选项。它更简单，正如我测试的那样，它不会破坏小屏幕中的响应设计。我还没有测试其他两个选项。我刚刚将内联样式添加到

中，就像

style=“height:260px！重要；overflow-y:scroll；overflow-x:hidden；”