メニュースタイル、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; 
}

最初の画像は、正しい表示にすべての時間を示し、もう1つは正しく表示されていないので、避けようとしています。

Correct display all the time