Ссылка на отзывчивую панель навигации не работает на мобильном устройстве

Я разработал свой первый сайт, используя django. Он отлично работает на настольном компьютере, но на мобильном устройстве ссылки подменю категорий не работают. При нажатии они ведут себя так, как будто я нажал на белое пространство и закрыл навигационную панель. Примечание: ссылки Intital работают и на мобильном устройстве. Дочерние ссылки категорий не работают. Я подумал о z-index, но родительские ссылки работают. Вот коды:

<div id="responsive-nav">
            <!-- category nav -->
            {% if page %}
                <div class="category-nav">
            {% else %}
                <div class="category-nav show-on-click">
            {% endif %}
            <span class="category-header">{% trans "Categories" %} <i class="fa fa-list"></i></span>


            {% load myapptags %}
                    {% categorylist as category %}

            {% load mptt_tags %}

            <ul class="category-list">
                {% recursetree category %}
                    <li class="dropdown side-dropdown">
                        <a href="{% url 'category_products' node.id node.slug %}" class="dropdown-toggle" {% if not node.is_leaf_node %} data-toggle="dropdown" aria-expanded="true" {% endif %}>{{ node.title }} <i class="fa fa-angle-right"></i></a>
                        <div class="custom-menu">
                                    {% if not node.is_leaf_node %}
                                        <ul class="children">
                                            {{ children }}
                                        </ul>
                                    {% endif %}
                        </div>
                    </li>
                {% endrecursetree %}
            </ul>
</div>

my apptag

@register.simple_tag
def categorylist():
    return Category.objects.all()

css мобильного

@media only screen and (max-width: 991px) {
#responsive-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    max-width: 270px;
    width: 0%;
    overflow: hidden;
    background-color: #FFF;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    z-index: 990;
  }
  #responsive-nav.open {
    width: 100%;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
  #responsive-nav .dropdown .custom-menu {
    display: none;
    position: static;
    width: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-top: none;
    border-left: 2px solid #818589;
  }
  #responsive-nav .dropdown.open .custom-menu {
    display: block;
    min-width: auto;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}

Вернуться на верх