Question

I’m a novice and ran my code through an html validator.

Regarding my navigation I receive a message that reads: :Element ul not allowed as child of element ul in this context”

Here is the html structure:

<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>

Whats wrong with it? It looks fine across browsers. Should I be concerned or take action?

Answer 1

A ul can not be a direct child of another ul, it needs to be contained within an 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>

you could also give the menu some headings by adding it in the li before the child ul,