我目前正在尝试构建我的第一个网站，主要是使用HTML5 / CSS3，我遇到了一个问题，我确信它只是解决了但是很难解决。
除了导航栏之外，我的主页正常工作，当我缩小窗口时，所有元素（如hgroup，footer和main部分）都可以滚动。
然后我的导航栏消失了：
一个。放大太多 湾使窗户足够小。
这很容易解决吗？
非常感谢
继承我的HTML（请原谅，我是一个真正的新手）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Worthworks Signage</title>
</head>
<body>
<div id="container"> <!--WRAP ENTIRE DOCUMENT-->
<header>
<a href="index.html">
<img class="logo" src="images/logos/300pxbluegradient.jpg" alt="Worth Works Signage">
</a>
<hgroup>
<h1><span class="blueText">Worth</span>works Signage</h1>
<h2>Sign Design – <span class="blueText">Manufacture </span>– Installation – <span class="blueText">Refurbishment </span>– Advice</h2>
</hgroup>
<nav> <!--START OF NAVIGATION-->
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='products.html'><span>Products</span></a> <!--PRODUCTS-->
<ul>
<li class='has-sub'><a href='#'><span>Signs</span></a> <!--PRODUCT SUB #1-->
<ul>
<li><a href='#'><span>Castings</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Casting</span></a> <!--PRODUCT SUB #2-->
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Site Work</span></a> <!--PRODUCT SUB #3-->
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='gallery.html'><span>Gallery</span></a></li> <!--GALLERY-->
<li><a href='testimonials.html'><span>Testimonials</span></a></li> <!--TESTIMONIALS-->
<li><a href='contact.html'><span>Contact</span></a></li> <!--CONTACT US-->
<li class='last'><a href='about.html'><span>About Us</span></a></li> <!--ABOUT US-->
</ul>
</div>
</nav>
</header>
<!--END OF HEADER-->
<!--END OF NAVIGATION-->
<!-- START OF SECTION-->
<div id="section-wrap">
<div id="mainimage">Main Image Goes Here</div>
<div style="clear:both"></div>
<div id="brochure">Order your <a href="brochure.html"><u>FREE</u></a> Brochure today</div>
<div id="testimonals">SEE what our satisfied customers think..</div>
</div>
<!-- END OF SECTION-->
<div style="clear:both"></div>
<!-- START OF FOOTER-->
<footer>
<div id="wrap">
<div class="left footercol">
<h3 class="foothead">Connect</h3>
<div class="footcontent">
<ul>
<li class="facebook"><a href="http://www.facebook.com/worthworkssignage">Facebook</a></li>
<li class="twitter"><a href="http://www.twitter.com/WorthWorksSigns">Twitter</a></li>
</ul>
</div> <!--End of Column Content Div-->
</div> <!--End of Footer Column-->
这是我的CSS3：
*{
margin: 0 auto;
text-align:left;
}
body{
margin:0 0 300px;
width: 100%;
height:1200px;
padding:0;
font-size:13px;
font-family:helvetica neue,helvetica,arial, sans-serif;
color:#000000;
background-color: #cccccc;
}
#container{
min-height:100%;
border:1px solid black;
position:relative;
}
/* HEADER STYLING*/
header{
height:410px;
padding:0;
width:1580px;
background-color:#ffffff;
clear:both;
}
.logo{
display:inline;
margin:20px;
width:20%;
float:left;
padding:10px;
}
hgroup{
font-family:Baker Signet, Gills Sans Light;
padding-bottom:20px;
}
h1{
display:inline-block;
font-size:100px;
padding: 160px 0px 25px 10px;
color:#A1A1A1;
float:left;
}
h2{
clear:both;
display:inline-block;
font-size:28px;
padding-left:15px;
color:#A1A1A1;
float:center;
}
.blueText{
color:#4cb6ea;
font:
}
/*NAV BAR*/
nav{
width:1580px;
height:46px;
position:relative;
}
#cssmenu {
background-color: #4cb6ea;
margin: 0;
width: 1580px;
padding: 0;
line-height: 1;
border-top: 3px solid #4cb6ea;
display:inline-block;
position: relative;
font-family: Hallo Sans, sans-serif;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
width:1540px;
}
#cssmenu ul:after {
content: ' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
margin: 0;
padding: 0;
display: block;
position: relative;
width:12%;
}
#cssmenu ul li a {
text-decoration: none;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
content: '';
height: 10px;
width: 10px;
border-radius: 5px;
background: #000000;
z-index: 1;
top: 13px;
right: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: '';
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu ul li ul li a {
font-size: 18px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 140px;
padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
color: #4cb6ea;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #4cb6ea;
}
#cssmenu ul li ul li:hover > ul {
left: 170px;
top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 0;
top: 0;
z-index: 0;
background: #ffffff;
-webkit-transition: height .2s;
-moz-transition: height .2s;
-ms-transition: height .2s;
-o-transition: height .2s;
transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a:after {
display: block;
content: '';
background: #ffffff;
height: 12px;
width: 12px;
position: absolute;
border-radius: 13px;
right: 14px;
top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
display: block;
content: '';
border: 4px solid transparent;
border-top-color: #4cb6ea;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 16px;
top: 21px;
}
#cssmenu > ul > li > a {
color: #ffffff;
padding: 15px 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
z-index: 2;
position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
left: 0;
}
#cssmenu > ul > li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
#cssmenu > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
width: 100%;
}
#cssmenu ul > li {
float: none;
}
#cssmenu ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
#cssmenu ul > li:after {
display: none;
}
#cssmenu ul li.has-sub > a:after,
#cssmenu ul li.has-sub > a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover > ul {
left: 0;
position: relative;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
#cssmenu ul li ul li a {
padding: 8px 20px 8px 35px;
color: #ffffff;
width: auto;
}
#cssmenu ul li ul ul li a {
padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover > a {
color: #000000;
}
#cssmenu #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
}
#cssmenu #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
#cssmenu #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
}
/*MAIN CONTENT STYLING*/
#section-wrap {
width:1580px;
height:1200px;
}
#mainimage {
background:#fff;
width:1580px;
height:1000px;
color:#A1A1A1;
}
#brochure {
float:left;
background:#fff;
width:787px;
height:342px;
color:#A1A1A1;
border-top: 4px solid #4cb6ea;
border-right: 3px solid #4cb6ea;
border-bottom: 1px solid #4cb6ea;
}
#testimonals {
float:right;
background:#fff;
width:787px;
height:342px;
color:#A1A1A1;
border-top: 4px solid #4cb6ea;
border-left: 3px solid #4cb6ea;
border-bottom: 1px solid #4cb6ea;
}
答案 0 :(得分：0)
在@media查询中，您有以下CSS声明：
#cssmenu > ul {max-height: 0}
这是隐藏导航的行，您的最大高度为0px。