title: menu bar shrink when i restore down browser
body: <p>Here i try to create menu ... menu seems fine when browsers is in maximize and it seems like this
  <a href="http://oi61.tinypic.com/99m2ia.jpg" rel="nofollow">image1</a></p>
  
  <p>but when i restore down browser menu look like this
  <a href="http://oi57.tinypic.com/e6yc90.jpg" rel="nofollow">image 2</a></p>
  
  <p>code is </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;title&gt;GATR Enterprise - Home&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;script src="js/MyMenu1.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
  
  
  &lt;script type="text/javascript"&gt;
  &lt;!--
  
  function Text_Newsletter_onclick() {
  
  }
  
  // --&gt;
  &lt;/script&gt;
  
  
  
  
  
      &lt;style type="text/css"&gt;
          .style1
          {
              width: 100%;
          }
      &lt;/style&gt;
  
  
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="wrapper2"&gt;
  &lt;ul class="navbar"&gt;
  &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;
  &lt;ul id="Ul1"&gt;
  &lt;li&gt;&lt;a id="A1" href="Company_Profile.html"&gt;Company Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Our_Philsphoy.html"&gt;Our Philsohpy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="CEO_Profile.html"&gt;CEO Profile&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Board_of_Direct.html"&gt;Board of Directors&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Our_People.html"&gt;Our People&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Global_Partners.html"&gt;Global Partnership&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="carer.html"&gt;Career&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="training.html"&gt;TRAINING&lt;/a&gt;
  &lt;ul id="Ul2"&gt;
  &lt;li&gt;&lt;a id="A2" href="Academics.html"&gt;Academics&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Coorporate.html"&gt;Corporate&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Personnel.html"&gt;Our Personnel&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="Publishing_serv.html"&gt;PUBLISHING &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://www.gcbss.org"&gt;CONFERENCES&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Exhibition.html"&gt;EXHIBITION&lt;/a&gt;&lt;/li&gt;
  
  &lt;li&gt;&lt;a href="#"&gt;RESEARCH&lt;/a&gt;
  &lt;ul id="subnavlist"&gt;
  &lt;li class="b"&gt;&lt;a id="subcurrent" href="About_gjbssr.html"&gt;About GJBSSR&lt;/a&gt;
  &lt;ul class="c"&gt;
                               &lt;li class="a"&gt; &lt;a href="#" &gt;Link&lt;/a&gt;&lt;/li&gt;
  
                           &lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Data_collec_services.htm"&gt;Data Collection Services&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Proof_Edit.html"&gt;Editing &amp;amp; Proof Reading&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id="active"&gt;&lt;a href="contact.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css file</p>
  
  <pre><code>     .wrapper2 {
      background: #fff;
      width: 980px;
      min-width: 980px;
      margin: 0 auto;
      min-height: 800px;
  }
  
  
        .navbar {
      height: 50px;
          padding: 15px;
      margin: 0;
      position: absolute; /* Ensures that the menu doesn’t affect other elements */
      border-right: 1px solid #54879d; 
      margin-left: 55px;
      padding-left:15px;
       padding-bottom:15px;
       padding-top:0px;
       margin-left:25px;
  
  
      }
  
      .navbar li  {
              height: auto;
              width: 131px;  /* Each menu item is 150px wide */
              float: left;  /* This lines up the menu items horizontally */
              text-align: center;  /* All text is placed in the center of the box */
              list-style: none;  /* Removes the default styling (bullets) for the list */
              font: normal bold 12px/1.2em Arial, Verdana, Helvetica;  
              padding: 0;
              margin: 0;
              background-color: #366b82;
                          }
  
  
                          .navbar a   {                           
          padding: 18px 0;  /* Adds a padding on the top and bottom so the text appears centered vertically */
          border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background.  Combined with the right border, this creates a nice effect. */
          border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background.  Combined with the left border, this creates a nice effect. */
          text-decoration: none;  /* Removes the default hyperlink styling. */
          color: white; /* Text color is white */
          display: block;
          }
  
          .navbar li:hover, a:hover {background-color: #54879d;} 
  
  
          .navbar li ul   {
          display: none;  /* Hides the drop-down menu */
          height: auto;                                   
          margin: 0; /* Aligns drop-down box underneath the menu item */
          padding: 0; /* Aligns drop-down box underneath the menu item */         
          }
  
  
  .navbar li:hover ul     {
                          display: block; /* Displays the drop-down box when the menu item is hovered over */
                          }
  
                          .navbar li ul li {background-color: #54879d;} 
  
  
                          .navbar li ul li a  {
          border-left: 1px solid #1f5065; 
          border-right: 1px solid #1f5065; 
          border-top: 1px solid #74a3b7; 
          border-bottom: 1px solid #1f5065; 
          }
  
  .navbar li ul li a:hover    {background-color: #366b82;}
  
  
  /* i add this css code for link box*/ 
  
  .navbar li ul li ul li
          {
             display:block;
  
          }
  
  .b:hover .a{
      display:block;
  
      margin-left: 130px;
      margin-top: -50px;
  }
  
  
  .a{ 
  
     display: none;
  
  
      }
  </code></pre>
  
  <p>so why menu look like image 2 when i restore down browser ... </p>
  
  <p>any help?</p>