Drop down menu Zurb基金会两个顶杆

我对使用Zurb相当陌生，所以我想知道是否有人能为我提供一些启示

这是我的网站，目前没有运行Zurb。我试图在Zurb中重新制作这个，但我在创建两个顶部栏时遇到了麻烦

正如你在链接中看到的，我在横幅下的深蓝色栏中有5个链接，然后在它下面的浅蓝色区域中有类别。我怎样才能使它们像在链接中一样显示出来，但是在将浏览器的大小调整到较小时，它们都应该编译成一个下拉菜单

我尝试了下面的代码，它确实有效。。。但是第二个菜单只是在它下面浮动一点。我试着用一个div row类来分隔两个菜单，但它停止了整个工作。。。显然，我需要它在两行上，这样我就可以将第二个菜单正确地放在它下面

很抱歉，我无法上传Zurb模板的当前版本，但我现在正在笔记本电脑上脱机运行所有这些，因为我的FTP有问题

有什么想法吗

多谢各位

<div style="width: 100%; height: 100px; background: #0d233c">
            <div class="row">
                <nav class="top-bar" data-topbar role="navigation">
                    <ul class="title-area">
                        <li class="name">
                            <h1>
                                <span class="show-for-small-only"><a href="#"><B>Bitandpieces Vape</B></a></span>
                            </h1>
                        </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>
                    </ul>
                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="left" style='height: 100%'>
                          <li class="active"><a href="">Home</a></li>
                          <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                          <li class="active"><a href="ourteam/">Product Support</a></li>
                          <li class="active"><a href="services/">Contact Us</a></li>
                          <li class="active"><a href="aboutus/">About Us</a></li>
                        </ul>
                    </section>
                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="left" style='height: 100%'>
                          <li class="active"><a href="">Home</a></li>
                          <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                          <li class="active"><a href="ourteam/">Product Support</a></li>
                          <li class="active"><a href="services/">Contact Us</a></li>
                          <li class="active"><a href="aboutus/">About Us</a></li>
                        </ul>
                    </section>
                </nav>
            </div>
        </div>

---

如果您最终选择使用顶栏，则使用顶栏的单独实例创建两个顶栏，而不是添加部分，应该可以解决导航堆叠正确的问题

    <nav class="top-bar" data-topbar role="navigation">
         <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="left" style='height: 100%'>
                      <li class="active"><a href="">Home</a></li>
                      <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                      <li class="active"><a href="ourteam/">Product Support</a></li>
                      <li class="active"><a href="services/">Contact Us</a></li>
                      <li class="active"><a href="aboutus/">About Us</a></li>
                    </ul>
                </section>

            </nav>
    <nav class="top-bar" data-topbar role="navigation">

                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="left" style='height: 100%'>
                      <li class="active"><a href="">Home</a></li>
                      <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                      <li class="active"><a href="ourteam/">Product Support</a></li>
                      <li class="active"><a href="services/">Contact Us</a></li>
                      <li class="active"><a href="aboutus/">About Us</a></li>
                    </ul>
                </section>

            </nav>

我也建议坚持使用基础网格系统，并在自己的行中完全分开顶部横幅部分，避免那些高度：100种样式。只要你在课堂上使用他所建的所有课程，网站就会反应良好，表现良好。