Question

我有一个多级水平菜单，顶级和子级菜单数量未知。我希望将此菜单显示为一行，并显示与显示宽度允许的数量一样多的内容。我计划将所有菜单项放在一个模式对话框中，图标在菜单中右对齐。

我使用zurb foundation 5，我需要菜单来满足不同的屏幕宽度，但我99.9％肯定这是一个css问题，而不是基础。（即我不想为中/大/ xlarge编码）

我的问题是我无法将菜单限制在一个级别。它溢出/溢出到后续行，但如果我指定一个高度和溢出：隐藏，它会打破菜单的多级子级别。

我在这里创建了一个jsfiddle http://jsfiddle.net/gavtwtd/4tkpoL74/6/ 但请注意，您可能需要加宽结果窗格以查看问题。

啊，我必须跟jsfiddle一起使用我的代码，所以这里有一些代码：

<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>

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

0 个答案: