html页面缩小导航栏隐藏,html – 导航栏缩放问题[通俗易懂]

我有一个问题,我的导航栏似乎与CSS中的.container缩放.现在,我是一个新手,但我已经尝试搞乱CSS中的值,但无济于事.这是

HTML和CSS的代码：

* {

margin: 0px;

padding: 0px;

}

body {

font-family: verdana;

background-image: url(images/bg2.jpg);

max-width: 100%;

max-height: auto;

background-position: 0px 100px;

background-repeat: repeat-x;

background-color: black;

background-size: 100%;

}

#header {

background-color: #000000;

height: 100px;

width: 100%;

}

.container {

background-color: grey;

width: 960px;

height: auto;

margin: 0 auto;

color: rgb(200, 200, 200);

}

#logoArea {

width: 300px;

height: 100px;

background-image: url(images/logo.png);

float: left;

display: block;

}

#navArea {

height: 50%;

float: right;

}

#nav {

list-style: none;

margin-top: 5%;

}

#nav a {

color: #C8C8C8;

text-decoration: none;

width: 75px;

height: 50px;

display: table-cell;

vertical-align: middle;

padding: 0;

}

#nav li {

width: 75px;

height: 50px;

float: left;

margin-left: 30px;

background-color: #252525;

border: 2px solid silver;

border-radius: 8px;

padding: 0px;

text-align: center;

display: table-cell;

vertical-align: middle;

}

#nav li:hover {

background-color: grey;

}

.page {

background-color: rgba(19, 19, 19, 0.9);

padding: 20px;

padding-bottom: 1px;

}

p {

margin-bottom: 20px;

}

.box1 {

position: relative;

width: 300px;

height: 100px;

background-image: url(images/logo.png);

background-repeat: no-repeat;

float: left;

}

#imageLogo {

width: 960px;

height: 324px;

background-image: url(images/Triicell-logo.png);

background-repeat: no-repeat;

background-position: center;

}

Test site

正如我所说的那样,我是一个新手,所以如果我错过了一些非常明显的东西,如果你能指出我正确的方向,我会很感激.我整个上午一直在绞尽脑汁,试着想想它会是什么.

以下是一些参考我正在谈论的截图：

在缩放.container之前：

缩放.container后：

我正在做的是缩放它是我将.container的宽度更改为50％;.不要担心其他任何事情 – 我知道我将要做些什么来扩展其余部分,即图像等等 – 但它只是导航栏似乎跳出了原位.

但是,如果有人能帮我解决这个问题,我会非常感激.如果做不到这一点,至少指出我正确的方向.