无序列表导航html结构答案

【问题标题】：unordered list navigation html structure无序列表导航html结构
【发布时间】：2012-02-25 14:23:38
【问题描述】：

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

关于我的导航，我收到一条消息，内容如下：:Element ul not allowed as child of element ul in this context"

这里是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>

这有什么问题吗？它在浏览器中看起来不错。我应该担心还是采取行动？

【问题讨论】：

将内部无序列表包裹在li标签内。编辑：Yaron 打败了我。

标签： html css navigation html-lists

【解决方案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 中添加菜单来给菜单一些标题，

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

使用标题元素作为标志（我通常使用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 都有自己的链接和链接所代表的部分的小节，因此链接文本指向小节列表。

【讨论】：

【解决方案4】：

你需要包装

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

作为

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

等等……

【讨论】：