Q:

menu bar shrink when i restore down browser

Here i try to create menu ... menu seems fine when browsers is in maximize and it seems like this
image1
but when i restore down browser menu look like this
image 2
code is 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>GATR Enterprise - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/MyMenu1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript">
<!--

function Text_Newsletter_onclick() {

}

// -->
</script>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>

</head>
<body>

<div class="wrapper2">
<ul class="navbar">
<li><a href="index.html">HOME</a></li>
<li><a href="#">ABOUT US</a>
<ul id="Ul1">
<li><a id="A1" href="Company_Profile.html">Company Profile</a></li>
<li><a href="Our_Philsphoy.html">Our Philsohpy</a></li>
<li><a href="CEO_Profile.html">CEO Profile</a></li>
<li><a href="Board_of_Direct.html">Board of Directors</a></li>
<li><a href="Our_People.html">Our People</a></li>
<li><a href="Global_Partners.html">Global Partnership</a></li>
<li><a href="carer.html">Career</a></li>
</ul>
</li>
<li><a href="training.html">TRAINING</a>
<ul id="Ul2">
<li><a id="A2" href="Academics.html">Academics</a></li>
<li><a href="Coorporate.html">Corporate</a></li>
<li><a href="Personnel.html">Our Personnel</a></li>
</ul>
</li>
<li><a href="Publishing_serv.html">PUBLISHING </a></li>
<li><a href="http://www.gcbss.org">CONFERENCES</a></li>
<li><a href="Exhibition.html">EXHIBITION</a></li>

<li><a href="#">RESEARCH</a>
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
<ul class="c">
                             <li class="a"> <a href="#" >Link</a></li>

                         </ul></li>
<li><a href="Data_collec_services.htm">Data Collection Services</a></li>
<li><a href="Proof_Edit.html">Editing &amp; Proof Reading</a></li>
</ul>
</li>
<li id="active"><a href="contact.html">CONTACT US</a></li>
</ul>
  </div>
</body>
</html>

css file
     .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;

    }

so why menu look like image 2 when i restore down browser ... 
any help?

A:

In addition to Trevan's answer, your container isn't well styled. The content is pushed to the right a bit, so even if you declare a width of 12.5% it wont be on the same page.
I've mocked up your file in a JSfiddle.
Here are the new styles:
.navbar {
        height: 50px;
        border-right: 1px solid #54879d;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .navbar li  {
        height: auto;
        width: 12.5%;
        float: left;
        text-align: center;
        list-style: none;
        font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
        background-color: #366b82;
     }

