Why are my list items displayed above their parent <div>?

This is happening in both Safari and Firefox. My navigation bar looks like this:

<div>
  <ul>
    <li><a href=开发者_JAVA百科"#">Test</a></li>
  </ul>
</div>

The relevant CSS looks like:

li {
  float: left
}

a:hover {
  background-color: blue;
}

For some reason, the list items are floating above the <div> they're inside (#navBar). I can't figure out why this seemingly simple design is causing problems.

Thanks for the advice.

Add display: block to #navBar a.