correct semantics for ul in ul

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

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

Solution 3:

This took me a little while to understand because I wrapped my inner ul in its own li tag and not within the li tag that my inner ul was attached to. If you wrap your inner ul in its own li tag you'll get an additional unneeded bullet.

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>item 3</li>
 <li>Item 4</li>
 <li>Item 5 has sub items:
      <ul>
          <li>Sub Item 1</li>
          <li>Sub Item 2</li>
      </ul>
 </li>
 <li>Item 6</li>
 <li>Item 7</li>
</ul>

Solution 4:

You need to put the inner ul inside an li element.

Solution 5:

IN li can hold ul. Nexted li and uls are possible

<ul class="classname">
    <li>
        <a href="">TEST</a>
    </li>
    <li> 
        <ul class="classname">
            <li><a href="">1.1</a></li>
            <li><a href="">1.2</a></li>
        </ul>
    </li> 
 </ul>