Question

我是新手，通过html验证器运行我的代码。

关于我的导航，我收到一条消息：：在此上下文中，元素ul不允许作为元素ul的子元素“

这是html结构：

<nav>
<div class="nav_container">
<ul class="navigation">

 <ul class="logo">
    <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li>
</ul>
<ul class="subnav">
    <li><a href="index.htm">home</a></li>
   </ul>
<ul class="subnav">
    <li><a href="reclaimedwood.htm">reclaimed wood</a></li>
       <li><a href="design.htm">design</a></li>
   </ul>
   <ul class="subnav">
    <li><a href="flooring.htm">flooring</a></li>
    <li><a href="paneling.htm">paneling</a></li>
    <li><a href="beams.htm">beams</a></li>
</ul>
<ul class="subnav">
    <li><a href="shelving.htm">shelving</a>
    </li><li><a href="mantels.htm">mantels</a></li>
</ul>
<ul class="subnav">
    <li><a href="news.htm">news</a></li>
</ul>
<ul class="subnav">
    <li><a href="woodtypes.htm">wood types</a></li>
    <li><a href="phrases.htm">phrases</a></li>
</ul>

</ul>
</div>
</nav>

它有什么问题吗？它在浏览器中看起来很好。我应该关注还是采取行动？

Answer 1

ul不能是另一个ul的直接子，它需要包含在li

中

<ul class="navigation">
  <li>
    <ul class="logo">
      <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="index.htm">home</a></li>
   </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="reclaimedwood.htm">reclaimed wood</a></li>
      <li><a href="design.htm">design</a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="flooring.htm">flooring</a></li>
      <li><a href="paneling.htm">paneling</a></li>
      <li><a href="beams.htm">beams</a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="shelving.htm">shelving</a></li>
      <li><a href="mantels.htm">mantels</a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="news.htm">news</a></li>
    </ul>
  </li>
  <li>
    <ul class="subnav">
      <li><a href="woodtypes.htm">wood types</a></li>
      <li><a href="phrases.htm">phrases</a></li>
    </ul>
  </li>
</ul>

你也可以通过在孩子ul之前的li中添加它来给菜单添加一些标题，

Answer 2

你必须用li

包裹每个内部ul

<ul class="navigation">
    <li>
        <ul>
           <li>...</li>
        </ul>
    </li>
    <li>
        <ul>
           <li>...</li>
        </ul>
    </li>
    <li>
        <ul>
           <li>...</li>
        </ul>
    </li>
</ul>

Answer 3

您的结构可能有误。徽标不是列表或列表项。除了包含只是的列表项之外，另一个列表通常毫无意义。

使用标题元素作为徽标（我通常使用H1作为主页，H3使用其中的链接作为其他页面）：

<!-- for home page -->
<h1 id="logo">Company</h1>

<!-- for other pages -->
<h3 id="logo"><a href="/">Company</a></h3>

并确保您的导航具有正确的层次结构：

<ul>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Desktops</a></li>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Tablets</a></li>
        </ul>
    </li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </li>
</ul>

在该示例中，每个LI都有自己的链接和链接所代表的部分的子部分，因此链接文本将转向子部分列表。

Answer 4

你需要换行

<ul class="navigation">
 <ul class="logo">

作为

<ul class="navigation">
   <li>
    <ul class="logo">
     ...
    </ul>
  </li>

依旧......

无序列表导航html结构

4 个答案: