Submenu background color in CSS

Question

I am pretty new here and tryingto learn something in CSS. I have this question: how can I change the background color of just 1 leaf in the main menù? and, how can I avoid that these change reflects in sub-menu leaves? In the code below I need:

1. menu-item-10838 to be background-color: #e6df00
2. menu-item-10842 + menu-item-10843 + menu-item-10844 + menu-item-10845 + menu-item-10846 + menu-item-10847 to be background-color: #d7fb00 all the sub leave should stay deafault

<li id="menu-item-10838" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10838 item-level-0 opener-page"><a href="#" class="woodmart-nav-link"><span class="nav-link-text">I PRODOTTI</span></a>
<div class="sub-menu-dropdown color-scheme-dark">
<div class="container">
<ul class="sub-menu color-scheme-dark" style="display: block;">
<li id="menu-item-10842" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10842 item-level-1"><a href="#" class="woodmart-nav-link"><span class="nav-link-text">I SALATI</span></a>
<ul class="sub-sub-menu color-scheme-dark" style="display: none;">
<li id="menu-item-10849" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10849 item-level-2"><a href="/categoria/aceto-balsamico-di-modena/" class="woodmart-nav-link"><span class="nav-link-text">Aceto</span></a></li>
</ul>
<span class="icon-sub-menu"></span></li>
<li id="menu-item-10843" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10843 item-level-1"><a href="#" class="woodmart-nav-link"><span class="nav-link-text">I DOLCI</span></a>
<ul class="sub-sub-menu color-scheme-dark" style="display: none;">
<li id="menu-item-10870" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10870 item-level-2"><a href="/categoria/pasticceria-shop-online/biscotti-artigianali/" class="woodmart-nav-link"><span class="nav-link-text">Biscotteria</span></a></li>
</ul>
<span class="icon-sub-menu"></span></li>
<li id="menu-item-10844" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10844 item-level-1"><a href="#" class="woodmart-nav-link"><span class="nav-link-text">DALLA TERRA</span></a>
<ul class="sub-sub-menu color-scheme-dark">
<li id="menu-item-10871" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10871 item-level-2"><a href="/categoria/frutta/" class="woodmart-nav-link"><span class="nav-link-text">Frutta &amp; Verdura</span></a></li>
</ul>
<span class="icon-sub-menu"></span></li>
<li id="menu-item-10845" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10845 item-level-1"><a href="/categoria/cesti-gastronomici-on-line" class="woodmart-nav-link"><span class="nav-link-text">CESTI &amp; CONFEZIONI</span></a></li>
<li id="menu-item-10846" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10846 item-level-1"><a href="#" class="woodmart-nav-link"><span class="nav-link-text">LA CANTINA</span></a>
<ul class="sub-sub-menu color-scheme-dark">
<li id="menu-item-10875" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10875 item-level-2"><a href="/categoria/vino/vino-bianco/" class="woodmart-nav-link"><span class="nav-link-text">Vino Bianco</span></a></li>
</ul>
<span class="icon-sub-menu"></span></li>
<li id="menu-item-10847" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10847 item-level-1"><a href="#" class="woodmart-nav-link"><span class="nav-link-text">DA BERE</span></a>
<ul class="sub-sub-menu color-scheme-dark">
<li id="menu-item-10879" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10879 item-level-2"><a href="/categoria/birra-artigianale-italiana/" class="woodmart-nav-link"><span class="nav-link-text">Birra</span></a></li>
</ul>
<span class="icon-sub-menu"></span></li>
</ul>
</div>
</div>
<span class="icon-sub-menu up-icon"></span></li>

Thanks in advance for helping :-)

Answer 1

I'd refactor that code and use a better indentation.

You can try to use immediate children selector

ul > ul {
  // This target the second level ul but not an hypothetic third level ul
  background-color: #e6df00
}

Or you can select via your .item-level-x class

Answer 2

Simply set the background-color for every class that should have a specific color

.menu-item {
    background-color: $default-color
}
#menu-item-10838 {
    background-color: #e6df00
}
#menu-item-10842, #menu-item-10843, ... {
    background-color: #d7fb00
}