CSS问题时调整浏览器

我在poitioning窗口面临一个问题：CSS问题时调整浏览器

当我调整窗口，我的CSS falied;我指的是页面的外观变化：

下面是代码：

网页：

  <!-- Begin Wrapper --> 
    <div id="wrapper"> 
    <!-- Begin Header --> 
    <div id="header"> 
    <h1> 
    Header 
    </h1> 
    </div> 
    <!-- End Header --> 

    <!-- Begin Navigation --> 
    <div id="navigation"> 
    <div class="menu"> 
     <ul> 
      <li><a href="#" >Home</a></li> 
      <li><a href="#" id="current">One</a> 
       <ul> 
        <li><a href="#">asd</a></li> 
        <li><a href="#">fdasdasd</a></li> 
        <li><a href="#">asdasdasd</a></li> 
        <li><a href="#">fsadfsd</a></li> 
       </ul> 
      </li> 
      <li><a href="/faq.php">Two</a> 
       <ul> 
       <li><a href="#">sdfsdfasdf</a></li> 
       <li><a href="#">sdfsdf</a></li> 
       <li><a href="#">sdfsdaf</a></li> 
       <li><a href="#">werqwer</a></li> 
       </ul> 
      </li> 
      <li><a href="/faq.php">Three</a> 
       <ul> 
       <li><a href="#">safdfwe</a></li> 
       <li><a href="#">sdafdf</a></li> 
       </ul> 
      </li> 


      <li><a href="/contact/contact.php">My Account</a> 

      </li> 
      <li> 
       <input type="text" style="width:200px;" id="search" /> 
       <asp:Button ID="btnSearch" runat="server" Text="Search" /> 
      </li> 
     </ul> 
    </div> 

    </div> 
    <!-- End Navigation --> 
    <!-- Begin Left Column --> 
    <div id="leftcolumn"> 


    </div> 
    <!-- End Left Column --> 
    <!-- Begin Content Column --> 

    <div id="content"> 

    </div> 
    <!-- End Content Column --> 
    <!-- Begin Right Column --> 
    <div id="rightcolumn"> 

    </div> 
    <!-- End Right Column --> 
    <!-- Begin Footer --> 
    <div id="footer"> 


    </div> 

    <!-- End Footer --> 
</div> 
<!-- End Wrapper --> 
    </div>

CSS：

menu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font: 67.5% "Tahoma", "Verdana", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    } 
.menu ul{ 
    background:#333333; 
    height:35px; 
    list-style:none; 
    display:block; 
    margin:0; 
    padding:0; 
    } 
    .menu li{ 
     float:left; 
     padding:0px; 
     } 
    .menu li a{ 
     background:#333333 url("images/seperator.gif") bottom right no-repeat; 
     color:#cccccc; 
     display:block; 
     font-weight:normal; 
     line-height:35px; 
     margin:0px; 
     padding:0px 25px; 
     text-align:center; 
     text-decoration:none; 
     } 
     .menu li a:hover, .menu ul li:hover a{ 
      background: #2580a2 url("images/hover.gif") bottom center no-repeat; 
      color:#FFFFFF; 
      text-decoration:none; 
      } 
    .menu li ul{ 
     background:#333333; 
     display:none; 
     height:auto; 
     padding:0px; 
     margin:0px; 
     border:0px; 
     position:absolute; 
     width:225px; 
     z-index:200; 
     /*top:1em; 
     /*left:0;*/ 
     } 
    .menu li:hover ul{ 
     display:block; 

     } 
    .menu li li { 
     background:url('images/sub_sep.gif') bottom left no-repeat; 
     display:block; 
     float:none; 
     margin:0px; 
     padding:0px; 
     width:225px; 
     } 
    .menu li:hover li a{ 
     background:none; 

     } 
    .menu li ul a{ 
     display:block; 
     height:35px; 
     font-size:12px; 
     font-style:normal; 
     margin:0px; 
     padding:0px 10px 0px 15px; 
     text-align:left; 
     } 
     .menu li ul a:hover, .menu li ul li:hover a{ 
      background:#2580a2 url('images/hover_sub.gif') center left no-repeat; 
      border:0px; 
      color:#ffffff; 
      text-decoration:none; 
      } 
    .menu p{ 
     clear:left; 
     }

全屏模式：

enter image description here