css - 怎么让这个固定的header div 有绝对的菜单和固定的logo 占用空间？

Question

有这个固定的 header元素( block 元素)，带有 absolute定位nav带有菜单的元素，和另一个固定元素作为标志:

<header>
  <nav id="menu">
    <ul id="menuItems">
       <li class="menu-item" role="menuitem">About</li>
       <li class="menu-item" role="menuitem">Contact</li>
    </ul>
  </nav>
  <div id="topLogo">
    <h1>MAIN</h1>
    <h2>SUB</h2>
  </div>
</header>

<header>没有尺寸，不占用空间(使用检查工具检查)。
我需要它来占用空间(并且仍然是 fixed )。

查看 JSFiddle 以查看完整的 CSS:
https://jsfiddle.net/5amo16q8/4/

Answer 1

将 nav 更改为 float:left 并删除 position:absolute 似乎可以创建所需的结果。
请参阅:https://jsfiddle.net/5amo16q8/8/