css - HTML Nav isn't working as expected -

i'm using html nav tag showing breadcrumbs in website (built on django/bootstrap).

i'm trying show dropdown menu shop departments , breadcrumbs. someone, order mixed up. shop departments showing in end instead of being first thing.

my code is:

<div class="animate-dropdown"> <!-- ========================================= breadcrumb ========================================= --><div id="top-mega-nav"> <div class="container">     <nav>     {% include "partials/nav_primary.html" expand_dropdown=0 %}     <li class="breadcrumb-nav-holder">         <ul>         {% category=product.categories.all.0 %}             {% 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 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 --> 

i inspected webpage using inspector , order of code expected. rendering not. whats wrong here?

edit: output in inspector looks

your rendered html invalid. causes problems. li element must have parent ul (or ol) element. if add ul around li class="breacrumb-nav-holder" should work fine.