2

Ok！そこで、このナビゲーションバーを作成しました。これは、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>

W3CValidatorを介してページを実行します。

于 2012-04-13T17:21:58.503 に答える