Как правильно закрыть элементы списка?

Question

Я пытался проверить свой код на валидаторе W3, и он отображает ошибки, такие как - Нет элемента li в области видимости, но замечен тег конца li. Это выпадающее меню начальной загрузки, которое я нашел на примерах начальной загрузки.

Я что-то упускаю из списка?

<li class="menu-open">
                <a href="#" class="drop-width dropdown-toggle" data-toggle="dropdown">Collections</a>
                <ul class="drop-menu dropdown-menu">
                    <li class="drop-menu dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">2014</a>
                        <ul class="drop-menu dropdown-menu">
                            <li class="dropdown-submenu">
                                            <li><a href="#">2014</a></li>
                                            <li><a href="#">2013</a></li>
                                            <li><a href="#">2012</a></li>
                                            <li><a href="#">2011</a></li>
                            </li>
                        </ul>
                    </li>
                    <li class="drop-menu dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">2014</a>
                        <ul class="drop-menu dropdown-menu">
                            <li class="drop-menu dropdown-submenu">
                                            <li><a href="#">2014</a></li>
                                            <li><a href="#">2013</a></li>
                                            <li><a href="#">2012</a></li>
                                            <li><a href="#">2011</a></li>
                            </li>
                        </ul>
                    </li>
                    <li class="drop-menu dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">2014</a>
                        <ul class="drop-menu dropdown-menu">
                            <li class="dropdown-submenu">
                                            <li><a href="#">2014</a></li>
                                            <li><a href="#">2013</a></li>
                                            <li><a href="#">2012</a></li>
                                            <li><a href="#">2011</a></li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>

Answer 1

Вы, вероятно, хотите, чтобы внутри ваших пунктов подменю был еще один ul

<ul class="drop-menu dropdown-menu">
    <li class="dropdown-submenu">
        <ul>
            <li><a href="#">2014</a></li>
            <li><a href="#">2013</a></li>
            <li><a href="#">2012</a></li>
            <li><a href="#">2011</a></li>
        </ul>
    </li>
</ul>

Answer 2

В следующем коде:

<li class="drop-menu dropdown-submenu">
    <li><a href="#">2014</a></li>
    <li><a href="#">2013</a></li>

Вы определенно не можете иметь <li> в качестве прямого потомка самого себя. Это одна из основных проблем, и кроме этого, попробуйте правильно все закрывающие теги. Примеры начальной загрузки отлично проверены.