Question

在我的网站上goblinnightvision.com我收到了几个我不明白的w3验证错误。我希望你们中的一些专家可以给我一些帮助。下面我列出了一些验证错误：

第60行，第13栏：文件类型不允许元素“br”在这里;假设缺少“li”开始标记

第63行，第32列：文档类型不允许元素“li”在这里;缺少“ul”，“ol”，“menu”，“dir”start-tag中的一个

亲近...

第66行，第12列：省略了“li”的结束标记，但指定了OMITTAG NO

第60行，第8列：开始标记在这里

此致杰夫

好的，当然，如果没有我现在复制到此消息中的代码，您就不能说太多。我希望你可以告诉我我做错了什么。

亲爱的Max，

感谢您对此的帮助。关于这些错误，我复制了一部分菜单栏，也许这对你有意义，因为它对我来说仍然没有意义。我当然是新手; - ）

            <ul>

                <li> <a href="index.html">Home</a> <!-- Hovedpunkt -->
              </li>
              <!-- end main LI -->
          </ul> <!-- end main UL -->

            <ul>

                <li> <a href="#">About nightvision</a> <!-- Hovedpunkt -->

                    <ul>

                        <li><a href="what_is_night_vision.html">what is night vision</a></li>
                        <br /> <!-- Underpunkt -->
                        <li><a href="uses_of_nightvision.html">Uses of Night Vision</a></li>
                        <br /> <!-- Underpunkt -->
                        <li><a href="all_our_night_vision_videos.html">Night Vision Videos</a></li>
                        <br /> <!-- Underpunkt -->

                  </ul> <!-- end inner UL -->

              </li> <!-- end main LI -->

    </ul> <!-- end main UL -->

Answer 1

我只是偶然发现了这个链接，我不太确定你是否已经想到这个，但我们走了。我想我个人有我认为你需要的东西，所以我只会分享我的想法。我还假设你需要一个下拉菜单，只能通过一些我会给你的CSS获得。

HTML：

 <div id="dropnav">
          <ul class="navbar">
             <li><a href="/index.html">Home</a></li>
             <li><a href="#.html">#</a>
                <ul>
                   <li><a href="#.html">#</a></li>
                   <li><a href="#.html">#</a></li>

                </ul>         
             </li>
             <li><a href="#.html">#</a>
                <ul>
                   <li><a href="#.html" >#</a></li>
                    <li><a href="#.html" >#</a></li>

                </ul>         
             </li>
             <li><a href="#.html">#</a>
                <ul>
                   <li><a href="#.html">#</a></li>

                </ul>         
             </li>
             <li><a href="#.html">#</a>
                <ul>
                   <li><a href="#.html">#</a></li>

                </ul>         
             </li>
             <li><a href="#.html">#</a>
                <ul>
                   <li><a href="#.html">#</a></li>
                   <li><a href="#.html">#</a></li>

                </ul>  

          </ul>
</div>

CSS：

#dropnav    {
    width: 100%; /* Spans the width of the page */
    height: 50px; 
    padding-bottom: 10px;
    margin: 0; /* Ensures there is no space between sides of the screen and the menu */
    z-index: 1; /* Makes sure that your menu remains on top of other page elements */
    position: relative;
    background-color: rgba(0, 0, 0, 0.00);
    }
.navbar {
    height: 50px;
        padding: 0;
        padding-bottom: 10px;
    margin: 0;
    position: absolute; /* Ensures that the menu doesn’t affect other elements */
    border-right: 1px solid #54879d; 
    }
.navbar li  {
    padding-bottom: 10px;
            height: auto;
            width: 150px;  /* Each menu item is 150px wide */
            float: left;  /* This lines up the menu items horizontally */
            object-position: top;
            text-align: center;  /* All text is placed in the center of the box */
            list-style: none;  /* Removes the default styling (bullets) for the list */
            font: normal bold 12px/1.2em Arial, Verdana, Helvetica;  
            padding: 0;
            margin: 0;
            background-color: rgba(0, 0, 0, 0.00);
                        }
.navbar a   {                           
        padding: 18px 0;  /* Adds a padding on the top and bottom so the text appears centered vertically */
        border-left: 1px solid #000; /* Creates a border in a slightly lighter shade of blue than the background.  Combined with the right border, this creates a nice effect. */
        border-right: 1px solid #000; /* Creates a border in a slightly darker shade of blue than the background.  Combined with the left border, this creates a nice effect. */
        text-decoration: none;  /* Removes the default hyperlink styling. */
        color: white; /* Text color is white */
        display: block;
        }

.navbar li:hover, a:hover {
    background-color: rgba(0, 0, 0, 0.00);
}

.navbar li ul   {
        display: none;  /* Hides the drop-down menu */
        height: auto;                                   
        margin: 0; /* Aligns drop-down box underneath the menu item */
        padding: 0; /* Aligns drop-down box underneath the menu item */         
        }               

.navbar li:hover ul     {
                        display: block; /* Displays the drop-down box when the menu item is hovered over */
                        }

.navbar li ul li {
    background-color: #808080;
}

.navbar li ul li a  {
        border-left: 1px solid #808080;
        border-right: 1px solid #808080;
        border-top: 1px solid #808080;
        border-bottom: 1px solid #808080;
        }

.navbar li ul li a:hover {
    background-color: #9a9a9a;
}

Answer 2

让我们从这个开始：

Line 63, Column 32: document type does not allow element "li"
here; missing one of "ul", "ol", "menu", "dir" start-tag.

这基本上是说你没有<li>没有<ul>, <ol>标签（你需要指定它是什么类型的列表）。

Line 66, Column 12: end tag for "li" omitted, but OMITTAG NO was specified

这意味着你有一个结尾<li>标签但没有开始标记。

Line 60, Column 13: document type does not allow element "br" here; 
assuming missing "li" start-tag

我不完全确定这个，但我认为你不应该在<br />内置<li>因为<li>项单独行反正。

Line 60, Column 8: start tag was here

这个，我不知道是否没有代码可以使用它。

希望这有帮助。

菜单栏的W3验证错误

2 个答案: