html - 为什么这个菜单会在 Chrome 中移动？

Question

我正在创建一个页面（链接如下）并使用 HTML5 标记，nav. 但是，如果在 Google Chrome 中调整窗口大小，菜单会跳转到div.banner.

为什么会发生这种情况，我该如何解决？

这是我正在设计的页面：http: //ubuntuone.com/1O7MLCGfZ0EqxQSFlpy4Yr

Answer 1

CSS

将以下 CSS 样式添加到 a.brand 的第 1 行。71号线和线号。343

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

将以下 css 样式添加到第 1 行的标题中。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 。