Question

这里我尝试创建菜单...当浏览器处于最大化状态时菜单似乎很好，看起来像这样 image1

但是当我恢复浏览器菜单时看起来像这样 image 2

代码是

<!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文件

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


    }

所以当我恢复浏览器时菜单看起来像图像2 ...

任何帮助？

Answer 1

将此行（.navbar li）width: 131px内部更改为width: 12.5%之类的百分比。当您将浏览器调整到特定点时，131px的显式宽度会导致他们跳过一行。

您应该考虑添加媒体查询以缩小字体大小（可能）或切换到单列视图以更好地适应较小屏幕上的所有列表项。

Answer 2

除了Trevan的答案，你的容器样式也不好。内容被推到右边一点，所以即使你声明12.5％的宽度它也不会在同一页面上。

I've mocked up your file in a JSfiddle.

以下是新款式：

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

Answer 3

使用定位

    .wrapper2 {
    position: relative;
    background: #fff;
    width: 1110px;
    min-width: 1110px;
    margin: 0 auto;
    min-height: 800px;;
}

当我恢复浏览器时菜单栏缩小

3 个答案: