html - このメニューが 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です。