0

我在 VS2010 中使用 'li', 'ul' 方法创建了一个下拉导航选项卡。我有一个文档类型声明

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

如果下拉菜单在没有 doctype 声明的情况下工作，则菜单选项卡看起来像这样。

下拉式菜单

仅当我删除 doctype 声明时，下拉菜单才有效。我也尝试过“框架集”和“严格”声明，但仍然没有结果。代码和样式表如下

<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

0

这取决于您声明的 HTML 版本、您使用的浏览器以及一系列不同的问题。如果您已声明它们，浏览器将对不同版本的 HTML 进行不同的处理。

HTML5 的 doctype 声明就像<!DOCTYPE HTML>.

因此，在您声明的 doctype 版本、您使用的浏览器或您的 doctype 声明的语法之间发生了一些事情。

http://www.w3.org/QA/2002/04/valid-dtd-list.html

严格的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

过渡的

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
于 2013-04-22T17:03:42.067 回答