css - Zurb Foundation 顶部栏下拉菜单在小屏幕上消失

Question

这很麻烦，因为我想要顶部栏的唯一原因是为了较小的屏幕。下拉菜单在中型和大型屏幕上工作正常，但在较小的屏幕上消失了。我读过它需要在 12 宽的列中，但这似乎没有帮助。它实际上引入了另一个(小)问题，即栏不再填满屏幕的宽度。下拉只有4个字符，怎么会太大呢？我在这里缺少什么？

<div class="row">
<div class="fixed small-12 medium-12 large-12 column">
<nav class="top-bar" style="color: white;" data-options="is_hover:false" data-topbar="">
    <ul class="title-area">
    <li class="name"></li>
    </ul>
    <section class="top-bar-section">
    <ul class="left">
        <li class="has-dropdown">
        <a href="#">Menu</a>
        <ul class="dropdown">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
        </li>
    </ul>
    </section>
</nav>
</div>
</div>

大:

小:

Answer 1

它仍然需要一些调整，但我修复了它。我加了

style="display: none;"

到

<ul class="title-area">

看起来他们都试图占据同一个空间。