菜单样式，CSS，HTML。顶部菜单避免溢出

我正在构建一个asp.net mvc应用程序。我有我的主菜单中的顶级菜单结构。它似乎呈现不同的屏幕尺寸或不同的屏幕分辨率。这使菜单结构看起来很糟糕。我希望它在任何时候都一样。 下面是我的母版页HTML：菜单样式，CSS，HTML。顶部菜单避免溢出

<body> 
<div class="page"> 

    <div id="header"> 
     <div id="badge" style="float:left; width:20%;"><img src="../../Content/Images/School_Badge.jpg" alt="badge"/></div> 

     <div id="title" style="width:80%;"> 
      <h1>School</h1> 
      <h2> 
      School Motto: Famba <br /> 
      English Meaning: Move Forward 
      </h2> 
     </div> 

     <br/><br/><br/><br/> 
     <div id="menucontainer"> 

      <ul id="menu">    
       <li><%: Html.ActionLink("About us", "Index", "Home")%></li> 
       <li><%: Html.ActionLink("Admissions", "Admissions", "Home")%></li> 
       <li><%: Html.ActionLink("Boarding", "Boarding", "Home")%></li> 
       <li><%: Html.ActionLink("Academic", "Academic", "Home")%></li> 
       <li><%: Html.ActionLink("Cultural", "Cultural", "Home")%></li> 
       <li><%: Html.ActionLink("Sport", "Sport", "Home")%></li> 
       <li><%: Html.ActionLink("Staff members", "Staff", "Home")%></li> 
       <li><%: Html.ActionLink("Contact us", "ContactUs", "Home")%></li> 
      </ul> 

     </div> 
    </div> 

    <div id="main"> 
     <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 

     <div id="footer"> 
     P.O Box 507 School| Phone: +23232 39 265064 | Fax: +232332 39 266043 | 
     © Copyright Private School <%: DateTime.Now.Year %> <br /> <br /> 
     </div> 
    </div> 
</div>

和与此相关的CSS如下：

.page 
{ 
    width: 72%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#header 
{ 
    position: relative; 
    margin-bottom: 0px; 
    color: #000; 
    padding-top: 20px; 
} 

#header h1 
{ 
    font-weight: bold; 
    padding: 5px 0; 
    margin: 0; 
    color: #fff; 
    border: none; 
    line-height: 2em; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 32px !important; 
} 

#header h2 
{ 
    font-weight: bold; 
    padding: 5px 0; 
    margin: 0; 
    color: #fff; 
    border: none; 
    line-height: 2em; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px !important; 
} 

#main 
{ 
    position:relative; 
    padding: 30px 0px 15px 0px; 
    background-color: #fff; 
    margin-bottom: 30px; 
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */ 
} 

#menucontainer 
{ 
    margin-top:100px; 
} 

div#title 
{ 
    display:block; 
    float:left; 
    text-align:left; 
} 

ul#menu 
{ 
    border-bottom: 1px #5C87B2 solid; 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
    text-align:center; 
} 

ul#menu li 
{ 
    display: inline; 
    list-style: none; 
} 

ul#menu li#greeting 
{ 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    color: #fff; 
} 

ul#menu li a 
{ 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    background-color: #e8eef4; 
    color: #151B54; 
} 

ul#menu li a:hover 
{ 
    background-color: #fff; 
    text-decoration: none; 
} 

ul#menu li a:active 
{ 
    background-color: #a6e2a6; 
    text-decoration: none; 
}                      

ul#menu li.selected a 
{ 
    background-color: #fff; 
    color: #000; 
}

第一张图片显示正确的显示所有的时间，第二个显示不正确的显示，我试图避免。

Correct display all the time