0

VS2010 で 'li', 'ul' メソッドを使用してドロップダウン ナビゲーション タブを作成しました。私はdoctype宣言を持っています

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

doctype 宣言なしでドロップダウンが機能する場合、メニュー タブは次のようになります。

ドロップダウンメニュー

ドロップダウンは、doctype 宣言を削除した場合にのみ機能します。'frameset' および 'strict' 宣言も試しましたが、まだ結果が得られません。コードとスタイルシートは以下

<tr>
    <td colspan="5" class="menubtnback">
        <div id="navMenu">
            <ul>
                <li> <a href="~/" style="width:65px">Home</a> 
                </li>
                <li> <a href="~/" style="width:150px">tab1</a> 
                    <ul>
                        <li><a href="~/" style="width:150px">subtab1</a> 
                        </li>
                        <li><a href="~/" style="width:150px">subtab2</a> 
                        </li>
                        <li><a href="~/" style="width:150px">subtab3</a> 
                        </li>
                        <li><a href="~/" style="width:150px">subtab4</a> 
                        </li>
                    </ul>
                </li>
                <li> <a href="~/" style="width:125px">tab2</a>

                </li>
                <li> <a href="~/" style="width:95px">tab3</a>

                </li>
                <li> <a href="~/" style="width:65px">tab4</a>

                </li>
                <li> <a href="~/" style="width:110px">tab5</a>

                </li>
                <li> <a href="~/" style="width:165px">tab6</a>

                </li>
                <li> <a href="~/" style="width:150px">tab7</a>

                </li>
            </ul>
        </div>
    </td>

スタイルシート:

.menubtnback {
    background-image: url(Images/Icons/top-nav-back.jpg);
}
#navMenu {
    margin: 0;
    padding: 0;
}
#navMenu ul {
    margin: 0;
    padding: 0;
    line-height:40px;
}
#navMenu li {
    margin: 0;
    padding :0;
    list-style:none;
    position: relative;
    float: left;
    background-image:url(Images/Icons/top-nav-back.jpg);
    color:#000;
}
#navMenu ul li a {
    text-align:center;
    font-family:tahoma;
    font-size:9.5pt;
    text-decoration:none;
    height:40px;
    display:block;
    color:#000;
    border-right:gray thin solid;
}
#navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:40px;
}
#navmenu ul li:hover ul {
    visibility:visible;
    z-index:1004;
}
#navMenu li:hover {
    background-image:url(Images/Icons/nav-back.jpg);
    color:#FFF;
}
#navMenu ul li:hover ul li a:hover {
    background-image:url(Images/Icons/nav-back.jpg);
    color:#FFF;
}
#navMenu a:hover {
    color:#FFF;
}
4

1 に答える 1