有没有办法将菜单链接放到该菜单链接的子菜单，并选择颜色，直到您按下另一个选项？

Question

So, to summarize, I'm talking about mobile menu that has hamburger. When you press the hamburger lvl1 menu drops (every menu item has 5px border on left side which is different for every menu item) and when you select a menu item (let's say "Papierbasteln") lvl2 or sub menu opens up. I would like to know how to put that menu item "Papierbasteln" in that lvl2/sub menu and to be in full background color and not just a left border.

So, I've managed to put that menu item "Papierbasteln" in lvl2/sub menu so I can see it now, but I can't make it to full background color and not in border-left... I made new css styles and imported it in that tag, but it still shows border-left.

So, this shows the original code, without any editing done by me.

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

And these are the colors that loads in the every individually <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 */

And in css I've tried defining it with :focus pseudo class and it only shows :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;}

(List goes on and on, but just so you can see what I've tried)

So, mine expected and actual results would be if someone knows how to make that lvl1/main menu item listed in lvl2/sub menu and to be colored in full background not just in 5px of left border.

RESOLVED:

I've noticed that it uses mustache.js as templates so I learned how to use mustache and figured out.

Firstly, I had to change css because it wasn't working, so I came up with this:

.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;}

List goes on for every nav_number, but basically it just changes color, centers the text and has different background color for every span with nav_number, which can be seen above in _colors.scss

I've added this also because I couldn't remove content from the nav_number span before

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

And lastly, I've configured the original code which at first I didn't understand at all.

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

So basically, I had to figure out that {{{lvl1class}}} represents every nav_number and it loads its css, and that {{{lvl1product}}} represents every menu item in lvl1 menu. Since it's only for mobile menu - I had to put ontouchstart="" so iOS doesn't brake and other little adjusments just to match the pre arranged design.

Every time you learn something new, it stays with you forever.