爲什麼此菜單在Chrome中移動？

Question

我正在創建一個頁面（下面鏈接），並使用HTML5標記nav。但是，如果窗口在Google Chrome中調整大小，則菜單跳轉到div.banner以下。

爲什麼會發生這種情況，我該如何解決？

這是我設計的頁面：http://ubuntuone.com/1O7MLCGfZ0EqxQSFlpy4Yr

Answer 1

CSS

添加以下CSS樣式的行a.brand沒有。第71行和第343

a.brand { 
display: block; 
float: left; 
} 

將下面的css樣式添加到行號的標題。 125號線397

header{ 
clear:both; 
} 

Answer 2

我認爲這會爲你工作：

上線363：

  nav { 
    height: 50px; 
    width: 400px; /* 5x the length of each nav item */ 
position:absolute;  /* use positioning rather than "float:right;" */ 
top:0px; 
right:0px; 
    padding: 0; 
    margin: 0; 
    color: #004824; 
    background: #fff; 
    vertical-align: middle; 
} 

和在線-331：

 div.banner { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 50px; 
    margin: 0; 
    padding: 0; 
    z-index: 2;  /* change z-index so img will be on top */ 
    border-bottom: 1px solid #004824; 
} 

這裏是一個jsFiddle是可能有助於證明。