防止導航欄水平收縮

Question

我正在構建此網站，但導航欄有一個小問題。我目前的寬度= 100％的導航工作正常，但是當我水平調整瀏覽器的大小時，會縮小菜單的大小（菜單在那裏，但背景被切斷）。我希望寬度最初爲100％，並且不會隨着瀏覽器的縮小或擴展而調整大小。誰能幫忙？

網站：http://bepas.azurewebsites.net/

下面是我的CSS。具體行：#cssmenu {height：50px;寬度：100％...

html,body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 


#cssmenu ul { margin: 0; padding: 0; white-space:nowrap;} 
#cssmenu li { margin: 0; padding: 0;} 
#cssmenu a { margin: 0; padding: 0;} 
#cssmenu ul {list-style: none;} 
#cssmenu a {text-decoration: none;} 
#cssmenu {height: 50px; width:100%;background-color: #708090; box-shadow: 0px 2px 3px rgba(0,0,0,.4); } 


#cssmenu > ul > li { 

    display:inline-block; 
    margin-left: 65px; 
    position: relative; 
} 

#cssmenu > ul > li > a { 
    color: #FFFFFF; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 18px; 
    line-height: 50px; 
    padding: 0px; 
-webkit-transition: color .15s; 
    -moz-transition: color .15s; 
    -o-transition: color .15s; 
     transition: color .15s; 
} 

#cssmenu > ul > li > a:hover {color: #000000; } 
body.home li.home, body.tech li.tech {font-weight:bold; } 

#cssmenu > ul > li > ul { 
    opacity: 0; 
    visibility: hidden; 
    padding: 0px 0 20px 0; 
    background-color: #FFFFFF; 
    text-align: left; 
    position: absolute; 
    top: 55px; 
    left: 50%; 
    margin-left: -80px; 
    width: 260px; 
-webkit-transition: all .3s .1s; 
    -moz-transition: all .3s .1s; 
    -o-transition: all .3s .1s; 
     transition: all .3s .1s; 
-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
     box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 

#cssmenu > ul > li:hover > ul { 
    opacity: 1; 
    top: 50px; 
    visibility: visible; 
} 


#cssmenu > ul ul > li { position: relative;} 

#cssmenu ul ul a{ 
    color: rgb(50,50,50); 
    font-family: Verdana, 'Lucida Grande'; 
    font-size: 13px; 
    background-color: #FFFFFF; 
    padding: 5px 8px 7px 16px; 
    display: block; 
-webkit-transition: background-color .1s; 
    -moz-transition: background-color .1s; 
    -o-transition: background-color .1s; 
     transition: background-color .1s; 
} 

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);} 

#cssmenu ul ul ul { 
    visibility: hidden; 
    opacity: 0; 
    position: absolute; 
    top: -16px; 
    left: 206px; 
    padding: 16px 0 20px 0; 
    background-color: rgb(250,250,250); 
    text-align: left; 
    width: 160px; 
-webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -o-transition: all .3s; 
     transition: all .3s; 
-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px; 
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
     box-shadow: 0px 1px 3px rgba(0,0,0,.4); 
} 


#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} 


#cssmenu ul ul a:hover{ 
    background-color: rgb(205,44,36); 
    color: rgb(240,240,240); 
} 

這是我如何定義菜單的html代碼片段。

<div id="cssmenu"> 
<ul> 
    <li><a href="#">Sites</a> 
     <ul> 
      <li><a href="#">My Sites List</a></li> 
      <li><a href="#">Site General Info.</a></li> 
      <li><a href="#">Utility Billing (Electricity)</a></li> 
      <li><a href="#">Utility Billing (Gas)</a></li> 
      <li><a href="#">Utility Billing (Solar)</a></li> 
      <li><a href="#">Occupancy Info.</a></li> 
      <li><a href="#">Exterior Lighting</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Buildings</a> 
     <ul> 
      <li><a href="#">General Info.</a></li> 
      <li><a href="#">Exterior Lighting</a></li> 
      <li><a href="#">Roof &amp Exhaust Fans</a></li> 
      <li><a href="#">HVAC Inventory</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Rooms</a> 
     <ul> 
      <li><a href="#">General Info.</a></li> 
      <li><a href="#">Interior Lighting</a></li> 
      <li><a href="#">Windows–Envelope Fenestration</a></li> 
      <li><a href="#">Doors – Envelope Fenestration</a></li> 
      <li><a href="#">Plugloads</a></li> 
      <li><a href="#">Skylights – Envelope Fenestration</a></li> 
      <li><a href="#">Domestic Hot Water Form</a></li> 
      <li><a href="#">Specialty Kitchen Equipment</a></li> 
      <li><a href="#">Misc. Inventory</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Runtime Schedulers</a> 
     <ul> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Swimming Pools</a> 
     <ul> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
     </ul> 
    </li> 
    <li><a href="report.html">Report</a></li> 
    <li><a href="#">Temperature</a> 
     <ul> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
      <li><a href="#">link</a></li> 
     </ul> 
    </li> 
    <li><a href="index.html">Sign in</a></li> 
</ul> 
</div> 

Answer 1

讓你的菜單項不顯示inline-block的，與浮動更換這樣

#cssmenu > ul > li { 
    /* display: inline-block; */ 
    margin-left: 65px; 
    position: relative; 
    float: left; 
} 

Answer 2

這是因爲您正在使用width:100%發生。你需要的是指定一個min-width風格，並以像素爲單位給出它的值。對於像素的適當值，請通過水平重新調整窗口大小來選擇導航欄，並選擇超出此範圍無法容忍縮小的內容。您可以使用標準1024px，例如，
#cssmenu{ min-width: 1024px; }