2

好的！所以我制作了这个导航栏，它在除 IE7 之外的所有浏览器中都能完美运行。它是一个左侧导航，由于某种原因它在 IE7 中折叠，但其他所有浏览器都可以正常显示。

这是html。

    <!doctype html>
    <html> 
    <head>
       <title>Test</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="reset.css">
       <link rel="stylesheet" href="styles.css">
</head> 
    <body>
<ul class="navbar">
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/products/">Products</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View Categories</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
        </ul>
    </li>
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/email/">Email</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">New Blast</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View Blast</a></div></li>
        </ul>
    </li>
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/reports/">Reports</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">By Month</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">By Type</a></div></li>
        </ul>
    </li>
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/recipes/">Recipes</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View Recipes</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
        </ul>
    </li>
    <li class="nav_head"><div class="navhd_outline"><a href="/admin/television/">Television</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View List</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
        </ul>
    </li>
    <li class="nav_head blog_head"><div class="navhd_outline"><a href="/admin/blog/">Blog</a></div></li>
        <ul>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">View Posts</a></div></li>
            <li class="nav_subhead"><div class="navsub_outline"><a href="#">Add/Remove</a></div></li>
        </ul>
    </li>
    <li class="nav_bottom">&nbsp;</li>
</ul>
    </body>
    </html>

这是CSS。

.navbar {
    float: left;
    background-color: #4d89d1;
    background-repeat: no-repeat;
    background-position: 18px 0px;
    top: -25px;
    width: 200px;
    margin-top: 20px;
    margin-left: 30px;
    padding-top: 25px;
    padding-bottom: 30px;
}

.nav_head {
    margin: 0 auto;
    padding: 1px;
    height: 36px;
    list-style: none;
}

.nav_head a {
    font-size: 15px;
    color: #900606;
}

.nav_head a:hover {
    color: #f5bf2b;
}

.navhd_outline {
    margin: 1px;
    padding-top: 8px;
    padding-left: 40px;
    padding-bottom: 22px;
    border: 1px dashed #f5bf2b;
    width: 154px;
    height: 2px;
}

.nav_subhead {
    padding: 1px;
    background-color: #900606;
    height: 36px;
    list-style: none;
    margin-left: 25px;
    width: 155px;
    text-align: right;
}

.nav_subhead a {
    color: #ffffff;
    text-decoration: none;
    padding-right: 10px;
}

.nav_subhead a:hover {
    color: #f5bf2b;
}

.navsub_outline {
    margin: 1px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    border: 1px dashed #f5bf2b;
    width: 131px;
    height: 2px;
}

.nav_bottom {
    height: 30px;
    background-position: 33px 0px;
    background-repeat: no-repeat;
}
4

1 回答 1

0

您仍然有无效的 HTML。这个问题在每一个都重复，<li>所以我只展示第一个......

<ul class="navbar">

    <li class="nav_head">
        <div class="navhd_outline"><a href="/admin/products/">Products</a></div>
    </li>  <!-- <<< this one closes the LI item -->
        <ul>
            <li class="nav_subhead">
                  <div class="navsub_outline"><a href="#">View Categories</a></div>
            </li>
            <li class="nav_subhead">
                  <div class="navsub_outline"><a href="#">Add/Remove</a></div>
            </li>
        </ul>
    </li>  <!-- <<< this is presently an extra one outside of the LI item -->

    ...
    <li class="nav_bottom">&nbsp;</li>

</ul>

你仍然有一个额外的结束</li>标签为每一个<li>项目。内部<ul>需要包含在 内部，<li></li>您可以将它与另一个一起包含在外部</li>。</li>如下所示删除标签...

<ul class="navbar">

    <li class="nav_head">
        <div class="navhd_outline"><a href="/admin/products/">Products</a></div>
        <ul>  <!-- <<< the entire child UL is inside the LI where it belongs -->
            <li class="nav_subhead">
                  <div class="navsub_outline"><a href="#">View Categories</a></div>
            </li>
            <li class="nav_subhead">
                  <div class="navsub_outline"><a href="#">Add/Remove</a></div>
            </li>
        </ul>
    </li>  <!-- <<< this one closes the LI item -->

    ...
    <li class="nav_bottom">&nbsp;</li>

</ul>

通过W3C Validator运行您的页面。

于 2012-04-13T17:21:58.503 回答