導航欄在窗口大小調整時消失

我目前正在嘗試構建我的第一個網站，主要是使用HTML5/CSS3，但我遇到過這個問題，我確信它只是簡單地解決了問題而已。導航欄在窗口大小調整時消失

除了導航欄，我的主頁正在按照需要工作，當我縮小窗口的大小時，所有元素（如hgroup，footer和主要部分）都可以滾動。

但是，我的導航欄消失時，我或者：

a。 b放大太多 b。使窗戶足夠小。

這很容易解決？

非常感謝

我的繼承人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; 
}

What i have done till now

來源

2014-05-17 user3647609

您的示例代碼中的頁腳元素未關閉。請使用http://jsbin.com/並在此處提供鏈接。 – vsync

感謝這裏是我的代碼和CSS http://jsbin.com/zuwipubi/1/edit?html,css,output – user3647609

以及你的CSS是一個完整的混亂。無論如何，消失菜單的問題在於你的代碼中有一個「媒體查詢」，我懷疑它是出於移動目的，當頁面的寬度達到某個點時它會改變它。用@media all和（max-width：768px）'和下面的代碼看看CSS行。 – vsync

在您的@media查詢中，您有以下CSS聲明：

#cssmenu > ul {max-height: 0}

這是隱藏導航的行，您給它的最大高度爲0px。

來源

2014-05-17 13:28:27 PavKR

我可以將這裏的值改爲46px，以匹配導航欄的高度，並且在調整大小時只有「Home」按鈕可見，可以確保進度。 – user3647609

這不是真的，這只是問題的一小部分。如果您不想在調整瀏覽器大小時更改內容，只需刪除所有媒體查詢。 – vsync

導航欄在窗口大小調整時消失

回答

相關問題