html - 在移动响应中，当我们停留在主类别列表上时，子类别应该在悬停时显示

Question

这是主要和子类别栏。在桌面视图中，当我悬停在主类别上时，子类别栏正在显示，但当我在移动响应上执行时，子类别栏未显示在主类别的悬停上。如何在移动响应中解决这个问题。在移动响应中它也应该工作

移动响应式屏幕

css

<div @click='toggle = !toggle' href="#" class="categoriesbtnfix" data-toggle="dropdown"><i style="font-size: 16px;position: relative;left: -18px;" class="fas fa-bars"></i>Categories <i style="position: relative;left: 27px;top: 4px;font-size:16px;" class="fas fa-angle-down"></i></i></div>
            <div v-show='toggle' class="q-categoryBar">
                {% if CategoriesBar%}
                {% for Categories in CategoriesBar %}
                <div class="dropdownCategory">
                    <a class="dropbtnCat"
                       href="{% url 'promotions' Categories.cat_name %}">{{Categories.cat_name}}<i class="arrow-indicator fa fa-angle-right" aria-hidden="true"></i></br></a>
                    <div class="dropdown-contentCat">
                        {% for subCategories in SubCategoriesBar %}
                        {% if Categories.cat_id == subCategories.parent_id %}
                        <a href="{% url 'promotions' subCategories.cat_name %}">{{subCategories.cat_name}}</a>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
                {% endif %}
            </div>

.q-categoryBar {
    position: relative;
    width: 128%;
    left: -1px;
    z-index: 1;
    background: #fff;
}

标签： htmlcss