css - 带有 2 个导航行的顶部栏 - Zurb Foundation 5

Question

我正在尝试创建一个固定的顶部栏，如图中所述，有 2 行

到目前为止，我有以下代码，但它只呈现在一行中:

<div class="fixed contain-to-grid">
    <nav class="top-bar" data-topbar>        
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">My Site</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>
        <section class="top-bar-section">
            <!-- Left Nav Section -->
            <ul class="left">
                <li class="active"><a class="global-nav__link">About</a></li>
                <li class=""><a class="global-nav__link">Resume</a></li>
                <li class=""><a class="global-nav__link">Projects</a></li>
                <li class=""><a class="global-nav__link">Timeline</a></li>
                <li class=""><a class="global-nav__link active">Contacts</a></li>                    
            </ul>
            <!-- Right Nav Section -->
            <ul class="">
                <li class="active"><a href="#">EN</a></li>
                <li>|</li>
                <li><a href="#">PT</a></li>
            </ul>
        </section>
    </nav>
</div>

这是 JSFiddle jsfiddle.net/Bonomi/cc9ay

有什么想法吗？

Answer 1

http://jsfiddle.net/Ty3ZT/4/

你是这个意思吗？

如果是这样，则只有一行的 HTML，其中包含左右部分。

我已经为另一行添加了 HTML:

<!--second row-->

    <section class="top-bar-section">
        <!-- Left Nav Section -->
        <ul class="left">
            <li class="active"><a class="global-nav__link">Some</a></li>
            <li class=""><a class="global-nav__link">Buttons</a></li>
            <li class=""><a class="global-nav__link">Here</a></li>
            <li class=""><a class="global-nav__link">Timeline</a></li>
            <li class=""><a class="global-nav__link active">Contacts</a></li>                    
        </ul>           
    </section>

由于高度固定为 45px，我不得不将其加倍以添加第二行的背景:

.top-bar {
    height:90px;
    line-height:90px;
}