如何使用css和html對齊菜單欄？

Question

問題是我在我的網站上放置了一個適合整個屏幕或頁面的水平菜單欄，所以當我嘗試調整大小並使菜單欄變小以使其大小與網站上的其他部分相同時，每次我放大進出頁面時，菜單欄與其他部分不成比例地調整大小。

要親自看到問題，請檢查我的網站http://thenativeisodrafts.tumblr.com並嘗試放大和縮小頁面。

非常感謝！

這裏的CSS：

#cssmenu ul { 
    margin: 0; 
    padding: 0; 
} 
#cssmenu li { 
    margin: 0; 
    padding: 0; 
} 
#cssmenu a { 
    margin: 0px; 
    padding: 0px; 
} 
#cssmenu ul { 
    list-style: none; 
} 
#cssmenu a { 
    text-decoration: none; 
} 
#cssmenu { 
    height: 70px; 
    background-color: rgb(35,35,35); 
    border-bottom: 5px solid #cd2c23; 
    border-top: 5px solid #cd2c23; 
    position:absolute; 
    right:241px; 
    z-index: 1000; 
} 
#cssmenu > ul > li { 
    float: left; 
    margin-left: 15px; 
    position: relative; 
} 
#cssmenu > ul > li > a { 
    color: rgb(160,160,160); 
    font-family: Verdana, 'Lucida Grande'; 
    font-size: 15px; 
    line-height: 70px; 
    padding: 15px 20px; 
    -webkit-transition: color .15s; 
    -moz-transition: color .15s; 
    -o-transition: color .15s; 
    transition: color .15s; 
} 
#cssmenu > ul > li > a:hover { 
    color: rgb(250,250,250); 
} 
#cssmenu > ul > li > ul { 
    opacity: 0; 
    visibility: hidden; 
    padding: 16px 0 20px 0; 
    background-color: rgb(250,250,250); 
    text-align: left; 
    position: absolute; 
    top: 55px; 
    left: 50%; 
    margin-left: -90px; 
    width: 180px; 
    -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); 
    z-index: 1000; 
} 
#cssmenu > ul > li:hover > ul { 
    opacity: 1; 
    top: 65px; 
    visibility: visible; 
} 
#cssmenu > ul > li > ul:before { 
    content: ''; 
    display: block; 
    border-color: transparent transparent rgb(250,250,250) transparent; 
    border-style: solid; 
    border-width: 10px; 
    position: absolute; 
    top: -20px; 
    left: 50%; 
    margin-left: -10px; 
} 
#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: rgb(250,250,250); 
    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); 
} 

這裏的HTML代碼：

<div id='cssmenu' style="width:940.5px; margin:auto"> 
<ul> 
    <li class='active '><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub '><a href='#'><span>Products</span></a> 
     <ul> 
     <li class='has-sub '><a href='#'><span>Product 1</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub '><a href='#'><span>Product 2</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

Answer 1

問題是#cssmenu已宣佈它position: absolute。刪除這個，你應該是金色的：

#cssmenu { 
    height: 70px; 
    background-color: #232323; 
    border-bottom: 5px solid #CD2C23; 
    border-top: 5px solid #CD2C23; 
    // position: absolute; // Remove this 
    // right: 241px; // And this 
} 

Answer 2

你可以刪除你的cssmenu的內聯css並添加這個你的主css文件。

#cssmenu { 
    height: 70px; 
    background-color: rgb(35,35,35); 
    border-bottom: 5px solid #cd2c23; 
    border-top: 5px solid #cd2c23; 
    width:940.5px; 
    margin:auto; 
    z-index: 1000; 
}