为什么我的列表项显示在其父<div>？</div>之上

Question

在Safari和Firefox中都会发生这种情况。我的导航栏看起来像这样：

<div>
  <ul>
    <li><a href="#">Test</a></li>
  </ul>
</div>

相关的CSS看起来像：

li {
  float: left
}

a:hover {
  background-color: blue;
}

出于某种原因，列表项浮动在它们所在的<div>之上（#navBar）。我无法弄清楚为什么这个看似简单的设计会导致问题。

感谢您的建议。

Answer 1

将display: block添加到#navBar a。