即使使用内联块，图像强制列表也是如此

Question

HTML：

<nav class="header"> <a href="#"><img src="smiley.gif" class="logo"></a>
    <ul class="navigation">
        <li id="a" class=""><a href="#"><span></span>A</a>
        </li>
        <li id="b" class=""><a href="#"><span></span>B</a>
        </li>
        <li id="account" class="right"> <a href="/admin/profile"><span></span>Test Test</a>

            <ul class="dropdown">
                <li><a href="/users/logout">Log out</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

从上一个问题我被告知使用内联块来使列表与图像（徽标）位于同一行。然而，当我使图像成为标题的整个高度时，它仍然会使列表向下。我做错了什么？

JSFiddle

Answer 1

将.navigation班级position从relative更改为absolute。

.navigation {
  position: absolute;
  display: inline-block;
  z-index: 1000;
}

fiddle