导航栏定位铬中的错误

Question

我只在chrome中遇到奇怪的CSS定位问题。我有一个用于导航的菜单<ul>，有时会随机推送。刷新页面始终可以解决问题。奇怪的是，有时如果我在正确显示页面时刷新页面，它会被推下来。

这是它应该看起来的样子，它大约有一半的时间：

这就是由于某种原因被推下来时会发生的事情。

网站已上线，您可以自己体验问题here。可能需要在网站周围点击一下才能让<ul>放弃。

以下是我正在使用的html/php：

<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>

相关的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;
}

同样，我只是在谷歌浏览器中遇到这个问题。 谢谢你的帮助！

Answer 1

从未想过问题，但我使用绝对定位作为解决方法。