Menu Bar Shrink When I Restore Down Browser

Question

0.00/5 (No votes)

See more:

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

IMAGE2[^]

code is

HTML

<!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 & Proof Reading</a></li>
</ul>
</li>
<li id="active"><a href="contact.html">CONTACT US</a></li>
</ul>
  </div>
</body>
</html>

CSS CODE

CSS

.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?

Posted 15-Oct-14 19:42pm

Diya Ayesa

Updated 15-Oct-14 19:45pm

v4

Add a Solution

Comments

Saqib Mobeen 16-Oct-14 4:59am

Images are not being opened.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Saqib Mobeen · Answer 1 · 2014-10-16T00:00:00

You need to make the below mentioned changes in your css.

1st: change the width in percentage(%) for each

CSS

.navbar li  {
            height: auto;
            width: 15%;  /* 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;
                        }

change the width of .wrapper2 in percentage(%)

CSS

.wrapper2 {
    background: #fff;
    min-width: 80%;
    width: 80%;
    margin: 0 auto;
    min-height: 800px;
}

and then (the big problem) remove the position: absolute for .navbar

CSS

  .navbar {
height: 50px;
    padding: 15px;
margin: 0;
border-right: 1px solid #54879d;
margin-left: 55px;
padding-left:15px;
 padding-bottom:15px;
 padding-top:0px;
 margin-left:25px;


}