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

我使用检查员检查了网页，代码顺序符合预期。但渲染不是。这有什么不对吗？

编辑：检查器中的输出看起来像

Answer 1

您呈现的HTML无效。这可能是导致问题的原因。 li元素必须包含父ul（或ol）元素。 因此，如果您在ul周围添加li class="breacrumb-nav-holder"，它应该可以正常工作。