Есть ли способ поместить ссылку меню в подменю этой ссылки меню и быть в выбранном цвете, пока вы не нажмете другую опцию?

Question

Итак, подведем итог, я говорю о мобильном меню, в котором есть гамбургер.Когда вы нажимаете кнопку меню «Гамбургер lvl1» (каждый элемент меню имеет границу 5 пикселей на левой стороне, которая отличается для каждого элемента меню) и когда вы выбираете пункт меню (скажем, «Papierbasteln»), открывается lvl2 или подменю.Я хотел бы знать, как поместить этот пункт меню "Papierbasteln" в это меню lvl2 / sub и чтобы он был в полном цвете фона, а не только в левой границе.

Итак, мне удалось поместить это менюпункт "Papierbasteln" в lvl2 / подменю, чтобы я мог видеть его сейчас, но я не могу сделать его в полноцветном фоне, а не в рамке слева ... Я создал новые стили CSS и импортировал его в этот тег, но этовсе еще показывает border-left.

Итак, это показывает оригинальный код, без какого-либо редактирования, сделанного мной.

<script id="template_iterator_product_outer" type="x-tmpl-mustache">
    <li class="lvl1  {{{lvl1class}}}  "><span> {{{lvl1product}}} </span>
        <div class="submenulvl2">
            <ul>
            {{{back_link_products}}}
               {{{iterator_product_inner}}}
            </ul>
        </div>
    </li>
</script>

И это цвета, которые загружаются в каждый индивидуально <span>tag

// BASTELSHOP

$nav_10000_color: #9753a0;    /* Papierbasteln */
$nav_12000_color: #a64745;    /* Basteln mit Kinder */
$nav_14000_color: #7ab3e0;    /* Basteltechniken */
$nav_24000_color: #c661bd;    /* Schmuckbasteln */
$nav_22000_color: #1d4e9b;    /* Kreativ mit Farbe */
$nav_20000_color: #87c44b;    /* Floristik */
$nav_30000_color: #d2b347;    /* Grundmaterial u Zub */

$nav_17000_color: #8369b4;    /* Dekotrends u Saisonales */
$nav_18000_color: #c06912;    /* Anlaesse */
$nav_26000_color: #6c4d30;    /* Wolle u Handarbeit */
$nav_28000_color: #a87d53;    /* Stoffe u Naehzub */
$nav_33000_color: #956aaf;    /* Baeren u Puppen */
$nav_34000_color: #5fa96e;    /* Buecher u Hefte */
$nav_36000_color: #d04745;    /* Restposten */

И в css я попытался определить его с помощью: псевдокласса focus, и он показывает только: active class

.nav_10000 span.active:focus-within, .nav_10000 span.active:active{text-align: center; color: white; background-color:#9753a0;} 
.nav_12000 span.active:focus-within, .nav_12000 span.active:active{text-align: center; color: white; background-color:#a64745;} 
.nav_14000 span.active:focus-within, .nav_14000 span.active:active{text-align: center; color: white; background-color:#7ab3e0;}

(список можно продолжать и продолжать, но просто таквы можете увидеть, что я пробовал)

Итак, мои ожидаемые и фактические результаты были бы, если бы кто-то знал, как сделать этот пункт lvl1 / main menu перечисленным в lvl2 / sub menu и чтобы его цвет не отображался на полном фоне, нетолько в 5px от левой границы.

РАЗРЕШЕНО:

Я заметил, что он использует mustache.js в качестве шаблонов, поэтому я научился использовать усы и понял.

Во-первых, мне пришлось изменить css, потому что это не былоЭто работает, поэтому я придумал это:

.nav_10000 span.active{text-align: center; color: #FFFFFF; background-color:#9753a0;}
.nav_12000 span.active{text-align: center; color: #FFFFFF; background-color:#a64745;}
.nav_14000 span.active{text-align: center; color: #FFFFFF; background-color:#7ab3e0;}

Список продолжается для каждого nav_number, но в основном он просто меняет цвет, центрирует текст и имеет разный цвет фона для каждого диапазона с nav_number, который может бытьвидел выше в _colors.scss

Я добавил это также потому, что не мог удалить контент из диапазона nav_number до

nav_10000 span.active::after{content: "" !important; background-color:#9753a0;} .nav_12000 span.active::after{content: "" !important; background-color:#a64745;} .nav_14000 span.active::after{content: "" !important; background-color:#7ab3e0;}

И, наконец, я настроил оригинальный код, которыйсначала я вообще ничего не понял.

<script id="template_iterator_product_outer" type="x-tmpl-mustache">
    <li class="lvl1  {{{lvl1class}}}  "><span> {{{lvl1product}}} </span>
        <div class="submenulvl2">
            <span ontouchstart="" class="{{{lvl1class}}} active" style="color: #fff; margin-top: -50px; z-index: 10; border-left: 0; padding-left: 0;">{{{lvl1product}}}</span>
            <ul>
            {{{back_link_products}}}
               {{{iterator_product_inner}}}
            </ul>
        </div>
    </li>
</script>

Итак, мне пришлось выяснить, что {{{lvl1class}}} представляет каждый номер nav_number и загружает его css, а этот {{{lvl1product}}} представляет каждый пункт меню в меню lvl1.Так как это только для мобильного меню - мне пришлось поставить ontouchstart = "", чтобы iOS не тормозила, а другие мелкие настройки просто соответствовали заранее подготовленному дизайну.

Каждый раз, когда вы узнаете что-то новое, оно остается с ваминавсегда.