correct semantics for ul in ul

Question

I am writing ul inside ul to make a accordion type of menu. But when I check my code below in html validator it gives me these errors

Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.) 

How can I write semantically correct html for ul in this case?

Here is my html

<nav class="row">             <ul class="menu">                 <li>                     <a href="">Uutiset</a>                 </li>                 <ul class="inside">                     <li><a href="">Fringilla Condimentum</a></li>                     <li><a href="">Lorem</a></li>                     <li><a href="">Fringillau</a></li>                     <li><a href="">Curabitur</a></li>                     <li><a href="">Mollis</a></li>                     <li><a href="">Ipsum</a></li>                     <li><a href="">Lorem</a></li>                     <li><a href="">Fringillau</a></li>                     <li><a href="">Curabitur</a></li>                     <li><a href="">Mollis</a></li>                     <li><a href="">Ipsum</a></li>                 </ul>                 <li><a href="">Foorumi</a></li>                 <li><a href="">Kauppa</a></li>                 <li><a href="">Messut</a></li>                 <li>                     <a href="">Asiakaspalvelu</a>                 </li>                 <ul class="inside">                     <li><a href="">Tilaa lehti</a></li>                     <li><a href="">Muutos tilaukseen</a></li>                     <li><a href="">Lähetä uutisvinkki</a></li>                     <li><a href="">Anna palautetta</a></li>                 </ul>                 <li><a href="">Nakoislehti</a></li>                 <li><a href="">Nae meidat</a></li>             </ul>         </nav> 

Answer 1

You must wrap every inner ULs with an LI, i.e.

<ul class="menu">     <li>         <a href="">Uutiset</a>     </li>     <li> <----         <ul class="inside">             <li><a href="">Fringilla Condimentum</a></li>             <li><a href="">Lorem</a></li>         </ul>     </li> <----  </ul>       

Answer 2

The children (direct descendants) of a ul element must all be li elements. This is a purely syntactic requirement.

The way to fix the error depends on semantics, however. If the inner lists correspond to subtopics of the topic of the preceding li, then you should wrap the inner list inside that li, e.g.

            <li>                 <a href="">Asiakaspalvelu</a>                 <ul class="inside">                     <li><a href="">Tilaa lehti</a></li>                     <li><a href="">Muutos tilaukseen</a></li>                     <li><a href="">Lähetä uutisvinkki</a></li>                     <li><a href="">Anna palautetta</a></li>                 </ul>             </li> 

Technically, this means just moving one </li> tag forward. You may wish to change the nesting, though, to reflect the structure, but this is for HTML source readability only.

If, on the other hand, inner list is just items at a lower level in some sense, without being subordinate to a higher level item, you could wrap them inside a <li> that contains nothing more, e.g.

        <ul class="menu">             <li>                 <a href="">Uutiset</a>             </li>             <li>                 <ul class="inside">                     <li><a href="">Fringilla Condimentum</a></li>                     <li><a href="">Lorem</a></li>                     ...                 </ul>             </li>         ... 

Technically this means just wrapping <li> and </li> around the <ul> element.

However, this would normally indicate a design flaw. If you just want some items to be more nested, you should do that with styling rather than markup. And a list containing inner lists without relation to the items of the outer list is rather confusing.