html - navbar positioning bug in chrome -

i having strange css positioning issue in chrome only. have menu <ul> navigation gets pushed down randomly. refreshing page fixes problem. strangely, if refresh page when being displayed correctly gets pushed down.

this how supposed look, , half of time:

and happens when gets pushed down reason.

the site live, , can experience problem here. might take clicking around site <ul> drop.

here html/php 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() $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, experiencing problem in google chrome. help!

never figured problem out used absolute positioning workaround.