Question

当我将网页的宽度设置为100％时，它适合浏览器。但是当我重新调整浏览器的大小时，我使用的导航栏重叠并且所有位置都出错了。我还无法弄清楚错误。我将在下面发布css和html代码。请有人帮我修理我的网页。

HTML：

<div class="main">
    <div class="header">
        <div class="logo12">
            <h2 style="position:absolute; left:20px; top:2px; color:#FFFFFF;">
                <a>
                    <font face="verdana">PHIS</font>

                    <small>Public Health Information System-Sri Lanka</small>
                </a>
            </h2>

        </div>
    <div>
</div>
<div id="menu">
    <ul>
        <li><a href="HomePHI.php">Home</a></li>
        <li>
            <a href="#">Services</a>
            <ul id="SubNav">

                    <li id="AccessFormPHI"><a href=""">Data Entry</a></li>

                    <li id="DataEntry"><a href="">Edit Temporary Forms</a></li>

                    <li id="ViewData"><a href="">View Data</a></li>

                    <li id="ViewAggregatedData"><a href="">Data Aggregation</a></li>

            </ul>
        </li>
        <li><a href="">Help</a></li>
        <li>
            <a href="">Profile</a>
            <ul id="SubNav">

                    <li id="AccessForm"><a href="">View and Maintain Profile</a></li>

                    <li id="ChangePassword"><a href="#">Change Password</a></li>
                <li><a href="login/index.php">Log Out</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

CSS：

/*    Height of the navigation bar became shorter   */
.main {
    width: 100%;
    font: 13px Georgia, "verdana", "Times New Roman", Times, serif;
    color: #FFFFFFF;
    background-color: #F2F2F2;
    height: 1000px;
    left: 0px;
}

/* No difference was appeared*/
#cssmenu {
    position: absolute;
    top: 100px;
    left: 0px;
}

/* Adjust the olor of the  navigation bar  */
.logo12 {
    position: absolute;
    padding-top: 10px;
    /*padding-left: 60px; */ 
    top: 0%;
    height: 6%;
    width: 100%;
    left: 0px;
    background: -moz-linear-gradient(top,#084B8A ,#0B173B);
}

/* Adjust the place where navigation   */
#menu {
    position: absolute;
    left: 45%; /* change to 390px to 350px */
    top: 20px;
    display: inline;
}

#menu ul {
    margin-left: auto;
    margin-right: auto;
    width :700px; /*change to 60% to 800px*/
}

/* upto now no difference  */
#menu ul li {
    display: inline;
    float: left;
    list-style: none;
    position: relative;
    height: 60px;
    width: 130px;
    padding-bottom: 20px;
    font-size: 13px;
}

/* Adjust the width of the sub navigation bar  */
#menu ul li ul li {
    float: left;
    list-style: none;
    position: relative;
    height: 30px;
    width: 180px;
    font-size: 12px;
}

/* Adjust the color of the sub navigation  bar */
#menu li ul {
    margin: 0px;
    padding: 10px; 
    display: none;
    position: absolute;
    left: 0px;
    z-index: 99;
    top: 28px;
    background: -moz-linear-gradient(top,#084B8A ,#0B173B); #726E6D; /*Menu Hover Color*/
    border: 1;
}

#menu ul li:hover ul {
    display: block; 
    width: auto;
}

/* Upto now no difference was visible   */
#menu li li {
    list-style: none;
}

/* Color of sub navigation bar letters became gray */
#menu li li a {
    color: #FFFFFF;
    text-decoration: none;
}

/* Letters hover color red in the sub navigation bar */
#menu li li a:hover {
    color: #900;
    text-decoration: none;
}

/* Upto now no difference */
li#main1 {
    padding-top: 0px;
}

/* Main navigation bar disappeared  */
#menu a {
    padding-right: 25px;
    text-decoration: none;
    letter-spacing: -1px;
    font-size: 1.2em;
    color: #BDBDBD;
    font: cambria;
}

/* Upto now no difference  */
#menu ul li a:hover {
    /* background: #D8D8D8; /*a tag hover color*/
    padding: 5px; /*change to 12px to 5px*/
    left: 0px;
}

Answer 1

您可以使用CSS的相对宽度，例如：

.main, .header{width:100%;}

Answer 2

将white-space: nowrap添加到导航CSS。我知道这是一个老帖子，但似乎还没有解决方案。

当我调整浏览器的标题时，导航栏会重叠。它不适合浏览器

2 个答案: