调整浏览器大小时出现CSS问题

问题描述

| 我在定位窗口时遇到问题： 当我调整窗口大小时，我的CSS失效了。我的意思是页面的外观已更改： 这是代码： 网页：

         <!-- 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;
        }   

全屏模式： 调整浏览器大小： 请帮忙     

解决方法

        如果在调整窗口大小时需要水平滚动条，请在最外面的

div

上添加

min-width

：

#wrapper {
    min-width: 960px
}

    ,        在菜单示例中增加宽度

menu { width: 890px; }

    ,        请观看演示 http://jsfiddle.net/abdulwakeel/FVewx/ 我已经用菜单ul修好了

        #menu ul{ min-width:960px}