navbar positioning bug in chrome

问题

I am having a strange css positioning issue in chrome only. I have a menu <ul> for navigation that sometimes gets pushed down randomly. Refreshing the page always fixes the problem. Strangely, sometimes if I refresh the page when it is being displayed correctly it gets pushed down.

This is how it is supposed to look, and it does about half of the time:

And this is what happens when it gets pushed down for some reason.

The site is live, and you can experience the problem for yourself here. It might take some clicking around the site to get the <ul> to drop.

Here is the html/php that I am using:

<div class="header">
<nav class="navbar">
  <a href="<?php echo url("home") ?>" class="title"><?php echo strtoupper($site->title())?></a>
  <ul>
    <?php foreach($pages->visible() AS $p): ?>
    <li><a<?php echo ($p->isOpen()) ? ' class="active"' : '' ?> href="<?php echo (strtolower(($p->title)) == "work") ? url("home") : $p->url(); ?>"><?php echo html($p->title()) ?></a></li>
    <?php endforeach ?>
  </ul>
</nav>
</div>

And relevant css:

 div.header{
   height: 80px;
   background-color: #000000;
   margin-bottom: 20px;
 }
 div.header nav.navbar{
   width: 960px;
   margin: auto;
   padding-top: 20px;
 }

 .navbar ul{
   float: right;
   padding-top: 10px;
   display: inline;
   list-style-type: none;
 }

.navbar ul li{
  margin-left: 20px;
  display: inline;
 }

.navbar a.title{
  width: 500px;
  color: #fff;
  font-size: 26pt;
  display: inline-block;
  padding-top: 8px;
}

Again, I am only experiencing this problem in google chrome. Thanks for the help!