Html unordered navigation list structure

Question

I am new and run my code with html validation.

As for my navigation, I get a message that says :: The ul element is not allowed as a child of 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> 

What is wrong with that? It looks great in browsers. Should I be worried or take action?

Answer 1

A ul cannot be a direct child of another ul, it must be contained inside 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 can also give the menu some headings by adding it to li before the child ul,

Answer 2

you must wrap each of the inner ul with li

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

Answer 3

Your structure is most likely incorrect. A logo is not a list or list. Like a list item that contains only another list is usually meaningless.

Use the title for the logo (usually I use H1 for the home page and H3 with a link inside it for other pages):

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

And make sure your navigation has the correct hierarchy as follows:

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

In the example, each LI has its own link and section subsections that the link represents, and thus the link text is a heading for the list of subsections.

Answer 4

You need to wrap

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

a

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

etc.