html - 即使使用内联 block ，图像也会强制向下列表

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>

在上一个问题中，有人告诉我使用内联 block 来使列表与图像( Logo )位于同一行。但是，当我将图像设为标题的全高时，它仍然会降低列表。我做错了什么？

JSFiddle

Answer 1

将 .navigation 类 position 从 relative 更改为 absolute。

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

fiddle