Css 响应水平菜单需要隐藏溢出，但如何隐藏？

我有一个多层次的水平菜单与未知数量的顶级和次级菜单。我想将此菜单显示为一行，并显示尽可能多的显示宽度。我计划把所有的菜单项放在一个模态对话框中，图标在菜单中右对齐

我使用ZURB基金会5，我需要菜单来适应不同的屏幕宽度，但我确信99.9%这是CSS问题，而不是基础。即我不想为中型/大型/大型编码

我的问题是，我无法将菜单限制在一个级别。它会溢出/溢出到后续的行中，但如果我指定一个height和overflow:hidden，它会打断菜单的多级子级别

我在这里创建了一个JSFIDLE 但请注意，您可能必须加宽结果窗格才能看到问题

啊，我必须在JSFIDLE中附带我的代码，下面是一些代码：

<div class="sticky">
    <nav class="top-bar" data-topbar role="navigation">
        <section class="top-bar-section">
            <ul class="right">
                <li class="divider"></li>
                <li><a href="#" data-reveal-id="myModal">&#9776;</a></li>
            </ul>
            <ul class="left" style="width:90%;">
                <li class="has-dropdown"><a href="#">Menu 1</a>
                    <ul class="dropdown">
                        <li><a href="#">Sub menu 1</a></li>
                        <li><a href="#">Sub menu 2</a></li>
                        <li><a href="#">Sub menu 3</a></li>
                        <li><a href="#">Sub menu 4</a></li>
                        <li><a href="#">Sub menu 5</a></li>
                    </ul>
                </li>
                <li><a href="/">Menu 2</a></li>
                <li><a href="/">Menu 3</a></li>
                <li><a href="/">Menu 4</a></li>
                <li><a href="/">Menu 5</a></li>
                <li><a href="/">Menu 6</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="/">Menu 7</a></li>
                <li><a href="#">Menu 99</a></li>
            </ul>
        </section>
    </nav>
</div>
<div id="myModal" class="reveal-modal" data-reveal>full menu here  <a class="close-reveal-modal">&#215;</a></div>   

---

这是css的正常行为，一旦您的div溢出：隐藏，它的子对象就不能从这个div中弹出。下面是一个混合使用css和javascript的解决方案：我很害怕。好的，谢谢你的指点。