Css ZURB基金会TopBar下拉在小屏幕上消失

这很麻烦，因为我想要一个顶栏的唯一原因是为了更小的屏幕。下拉菜单在大屏幕和中屏幕上都可以正常工作，但在小屏幕上消失。我已经读到它需要在一个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>

试验
试验
试验

大型：

小型：

---

它仍然需要一些调整，但我已经修复了它。我补充说

style="display: none;"

到

看起来他们都想占据同一个空间

我已经读到它需要在一个12宽的列内

我真的不认为这是对的；这就是你提出这个问题的原因

事实上我会改变

<div class="fixed small-12 medium-12 large-12 column">

及

还请注意，列表项应包含链接。改变

    <li>Test</li>
    <li>Test</li>
    <li>Test</li>

测试
试验
试验

到

---

这不完全一样，但可能有帮助。我使用顶部栏来显示中屏幕和大屏幕，我使用标签栏来显示小屏幕

你可以在我的书中找到灵感请随时检查。它也在播放

---

它是基于。我希望不会太难处理。

还注意到您缺少移动菜单图标

标题区域中应为安利

     <!-- Remove the class "menu-icon" to get rid of menu icon. Take    out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

您检查过滤芯了吗？通常的基础上插入汉堡包菜单没有汉堡菜单，但这将是很好的。我在找什么？下拉列表看起来好像在顶栏下方，但不可见或不可单击。嗯，必须有东西在那里。它很可能会使它在平板电脑下的屏幕上不显示任何内容。如果你不需要边距，可以使用行折叠类。你可以提供一个在线示例或一个链接，链接到你的作品。这将更容易帮助/检查。谢谢Elyasin，但我解决了上面的问题，我只是无法将其标记为已接受。实际上，我最终做了您提到的所有更改（除了链接，因为这只是一个概念证明）。将其置于12宽列的内部或外部没有任何效果。真正的解决办法是将ul#title区域设置为显示：none；然后你必须接受另一个答案，因为这解决了你的问题。如果这对你有用，请投我的一票。我投你的一票。这很有帮助，但不是答案，只是我需要做的事情。我知道，我明白了。你应该接受你自己的答案。让人们知道它已经解决了。（你也会因此得到一枚徽章。）我们鼓励你这样做。我需要等两天才能接受我自己的答案。

<div class="fixed show-for-small-only">

$(document).foundation();

$(document).foundation('topbar', 'reflow');

    <li>Test</li>
    <li>Test</li>
    <li>Test</li>

    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>

     <!-- Remove the class "menu-icon" to get rid of menu icon. Take    out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>