Question

我在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声明的情况下工作，则菜单选项卡如下所示。

dropdown menu

下拉列表仅在我删除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;
}

Answer 1

这取决于您宣布的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">

下拉导航选项卡不适用于doctype声明

1 个答案: