HTML Nav не работает должным образом

Question

Я использую тег HTML nav для показа панировочных сухарей на своем веб-сайте (построен на Django/Bootstrap).

Я пытаюсь показать выпадающее меню для Shop by Departments, а затем панировочные сухари. Но кто-то, порядок перепутан. В конце концов появляется Shop by Departments, а не первое.

Мой код:

<div class="animate-dropdown"> 
<!-- ========================================= BREADCRUMB ========================================= --><div id="top-mega-nav"> 
<div class="container"> 
    <nav> 
    {% include "partials/nav_primary.html" with expand_dropdown=0 %} 
    <li class="breadcrumb-nav-holder"> 
     <ul> 
     {% with category=product.categories.all.0 %} 
      {% for c in category.get_ancestors_and_self %} 
       <li class="breadcrumb-item"> 
        <a href="{{ c.get_absolute_url }}">{{ c.name }}</a> 
       </li><!-- /.breadcrumb-item --> 
      {% endfor %} 
      <li class="active">{{ product.title }}</li> 
      {% get_back_button as backbutton %} 
      {% if backbutton %} 
       <li class="pull-right"> 
        <a href="{{ backbutton.url }}"> 
         <i class="icon-arrow-left"></i> {{ backbutton.title }} 
        </a> 
       </li> 
      {% endif %} 
     {% endwith %} 

     </ul> 
    </li><!-- /.breadcrumb-nav-holder --> 
    </nav> 
    </div> 
</div><!-- /.container --> 

Я проверил веб-страницу с помощью инспектора и порядок кода, как ожидалось. Но рендеринг - нет. Что здесь не так?

Edit: Выход в инспекторе выглядит

Answer 1

Ваш оказанные HTML является недействительным. Именно это и вызывает проблемы. A li элемент должен иметь родителя ul (или ol) элемент. Итак, если вы добавите ul вокруг своего li class="breacrumb-nav-holder", он должен работать нормально.