Develop Reference

How to assure the correct text-content rendering into certain list items' ::before pseudo-elements?

I want to add an active class to every first element of the submenu (not to all the li's, only the first one from a bunch of li's with same first letter). and add the labels as A, B, C ----- i am achieving this with the css, but the problem is that it keeps adding labels to all, as i want the label to only first element. for example Brittle, britiana, bronze - it will add active class to first B only and same with the others.
how would i go about this?
.groupmenu-drop {
max-width: 900px;
margin: auto;
column-count: 4;
counter-reset: alphabeticList;
}
#media (max-width: 767px) {
.groupmenu-drop {
column-count: 1;
margin-left: 40px;
}
}
#media (min-width: 768px) and (max-width: 1024px) {
.groupmenu-drop {
column-count: 2;
margin-left: 50px;
}
}
.groupmenu-drop > .level1 {
position: relative;
padding: 0 0 14px !important;
counter-increment: alphabeticList;
}
.groupmenu-drop > .level1 {
padding-bottom: 5px;
}
.groupmenu-drop > .level1 a {
font: 600 14px/30px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #166665;
}
.groupmenu-drop .level1:before {
content: counter(alphabeticList, upper-alpha);
position: absolute;
top: 3px;
left: -40px;
border: 2px solid #166665;
text-align: center;
border-radius: 7px;
font: bold 21px/34px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #095352;
width: 27px;
height: 27px;
line-height: 23px;
}
.groupmenu-drop .level1:first-child:before {
background-color: #166665;
color: #fef6eb;
}
<ul class="groupmenu-drop slidedown">
<li class="level1 nav-1 item first">
<a
class="menu-link"
href="/brands/angelcare.html"
><span>Angelcare</span></a
>
</li>
<li class="level1 nav-2 item">
<a
class="menu-link"
href="/brands/baby-art.html"
><span>Baby Art</span></a
>
</li>
<li class="level1 nav-3 item">
<a
class="menu-link"
href="/brands/barbie.html"
><span>Barbie</span></a
>
</li>
<li class="level1 nav-4 item">
<a
class="menu-link"
href="/brands/bibado.html"
><span>Bibado</span></a
>
</li>
<li class="level1 nav-5 item">
<a
class="menu-link"
href="/brands/boon.html"
><span>Boon</span></a
>
</li>
<li class="level1 nav-6 item">
<a
class="menu-link"
href="/brands/braun.html"
><span>Braun</span></a
>
</li>
<li class="level1 nav-7 item">
<a
class="menu-link"
href="/brands/diono.html"
><span>Diono</span></a
>
</li>
<li class="level1 nav-8 item">
<a
class="menu-link"
href="/brands/disney.html"
><span>Disney</span></a
>
</li>
<li class="level1 nav-9 item">
<a
class="menu-link"
href="/brands/dorel.html"
><span>Dorel</span></a
>
</li>
<li class="level1 nav-10 item">
<a
class="menu-link"
href="/brands/dr-brown-s.html"
><span>Dr Brown's</span></a
>
</li>
<li class="level1 nav-11 item">
<a
class="menu-link"
href="/brands/dreambaby.html"
><span>Dreambaby</span></a
>
</li>
<li class="level1 nav-12 item">
<a
class="menu-link"
href="/brands/dreamgenii.html"
><span>Dreamgenii</span></a
>
</li>
<li class="level1 nav-13 item">
<a
class="menu-link"
href="/brands/dumbo.html"
><span>Dumbo</span></a
>
</li>
<li class="level1 nav-14 item">
<a
class="menu-link"
href="/brands/earth-friendly-baby.html"
><span>Earth Friendly Baby</span></a
>
</li>
<li class="level1 nav-15 item">
<a
class="menu-link"
href="/brands/east-coast.html"
><span>East Coast</span></a
>
</li>
<li class="level1 nav-16 item">
<a
class="menu-link"
href="/brands/fisher-price.html"
><span>Fisher-Price</span></a
>
</li>
<li class="level1 nav-17 item">
<a
class="menu-link"
href="/brands/fisher-price-little-people.html"
><span>Fisher-Price Little People</span></a
>
</li>
<li class="level1 nav-18 item">
<a
class="menu-link"
href="/brands/flair.html"
><span>Flair</span></a
>
</li>
<li class="level1 nav-19 item">
<a
class="menu-link"
href="/brands/gift-wrap-accessories.html"
><span>Gift Wrap Accessories</span></a
>
</li>
<li class="level1 nav-20 item">
<a
class="menu-link"
href="/brands/halilit.html"
><span>Halilit</span></a
>
</li>
<li class="level1 nav-21 item">
<a
class="menu-link"
href="/brands/hey-clay.html"
><span>Hey Clay</span></a
>
</li>
<li class="level1 nav-22 item">
<a
class="menu-link"
href="/brands/hot-wheels.html"
><span>Hot Wheels</span></a
>
</li>
<li class="level1 nav-23 item">
<a
class="menu-link"
href="/brands/infantino.html"
><span>Infantino</span></a
>
</li>
<li class="level1 nav-24 item">
<a
class="menu-link"
href="/brands/janod.html"
><span>Janod</span></a
>
</li>
<li class="level1 nav-25 item">
<a
class="menu-link"
href="/brands/kaloo.html"
><span>Kaloo</span></a
>
</li>
<li class="level1 nav-26 item">
<a
class="menu-link"
href="/brands/keel-toys.html"
><span>Keel Toys</span></a
>
</li>
<li class="level1 nav-27 item">
<a
class="menu-link"
href="/brands/lalaboom.html"
><span>Lalaboom</span></a
>
</li>
<li class="level1 nav-28 item">
<a
class="menu-link"
href="/brands/lamaze.html"
><span>Lamaze</span></a
>
</li>
<li class="level1 nav-29 item">
<a
class="menu-link"
href="/brands/lansinoh.html"
><span>Lansinoh</span></a
>
</li>
<li class="level1 nav-30 item">
<a
class="menu-link"
href="/brands/leap-frog.html"
><span>Leap Frog</span></a
>
</li>
<li class="level1 nav-31 item">
<a
class="menu-link"
href="/brands/lindam.html"
><span>Lindam</span></a
>
</li>
<li class="level1 nav-32 item">
<a
class="menu-link"
href="/brands/little-bird-told-me.html"
><span>Little Bird Told Me</span></a
>
</li>
<li class="level1 nav-33 item">
<a class="menu-link" href="/brands/mam.html"
><span>MAM</span></a
>
</li>
<li class="level1 nav-34 item">
<a
class="menu-link"
href="/brands/mattel.html"
><span>Mattel</span></a
>
</li>
<li class="level1 nav-35 item">
<a
class="menu-link"
href="/brands/medela.html"
><span>Medela</span></a
>
</li>
<li class="level1 nav-36 item">
<a
class="menu-link"
href="/brands/mega-bloks.html"
><span>Mega Bloks</span></a
>
</li>
<li class="level1 nav-37 item">
<a
class="menu-link"
href="/brands/milton.html"
><span>Milton</span></a
>
</li>
<li class="level1 nav-38 item">
<a
class="menu-link"
href="/brands/munchkin.html"
><span>Munchkin</span></a
>
</li>
<li class="level1 nav-39 item">
<a
class="menu-link"
href="/brands/my-garden-baby.html"
><span>My Garden Baby</span></a
>
</li>
<li class="level1 nav-40 item">
<a
class="menu-link"
href="/brands/nuby.html"
><span>Nuby</span></a
>
</li>
<li class="level1 nav-41 item">
<a class="menu-link" href="/brands/nuk.html"
><span>NUK</span></a
>
</li>
<li class="level1 nav-42 item">
<a
class="menu-link"
href="/brands/philips-avent.html"
><span>Philips Avent</span></a
>
</li>
<li class="level1 nav-43 item">
<a
class="menu-link"
href="/brands/plasticine.html"
><span>Plasticine</span></a
>
</li>
<li class="level1 nav-44 item">
<a
class="menu-link"
href="/brands/playmobil.html"
><span>Playmobil</span></a
>
</li>
<li class="level1 nav-45 item">
<a
class="menu-link"
href="/brands/ragtales.html"
><span>Ragtales</span></a
>
</li>
<li class="level1 nav-46 item">
<a
class="menu-link"
href="/brands/safety-first.html"
><span>Safety First</span></a
>
</li>
<li class="level1 nav-47 item">
<a
class="menu-link"
href="/brands/schleich.html"
><span>Schleich</span></a
>
</li>
<li class="level1 nav-48 item">
<a
class="menu-link"
href="/brands/summer-infant.html"
><span>Summer Infant</span></a
>
</li>
<li class="level1 nav-49 item">
<a
class="menu-link"
href="/brands/swaddleme.html"
><span>SwaddleMe</span></a
>
</li>
<li class="level1 nav-50 item">
<a
class="menu-link"
href="/brands/taf-toys.html"
><span>Taf Toys</span></a
>
</li>
<li class="level1 nav-51 item">
<a
class="menu-link"
href="/brands/thomas-and-friends.html"
><span>Thomas and Friends</span></a
>
</li>
<li class="level1 nav-52 item">
<a
class="menu-link"
href="/brands/tiny-love.html"
><span>Tiny Love</span></a
>
</li>
<li class="level1 nav-53 item">
<a
class="menu-link"
href="/brands/tommee-tippee.html"
><span>Tommee Tippee</span></a
>
</li>
<li class="level1 nav-54 item">
<a
class="menu-link"
href="/brands/tomy.html"
><span>Tomy</span></a
>
</li>
<li class="level1 nav-55 item">
<a
class="menu-link"
href="/brands/vicks.html"
><span>Vicks</span></a
>
</li>
<li class="level1 nav-56 item">
<a
class="menu-link"
href="/brands/vital-baby.html"
><span>Vital Baby</span></a
>
</li>
<li class="level1 nav-57 item">
<a
class="menu-link"
href="/brands/vtech.html"
><span>vTech</span></a
>
</li>
<li class="level1 nav-58 item">
<a
class="menu-link"
href="/brands/we-made-me.html"
><span>We Made Me</span></a
>
</li>
<li class="level1 nav-59 item">
<a
class="menu-link"
href="/brands/widdop-bingham.html"
><span>Widdop Bingham</span></a
>
</li>
<li class="level1 nav-60 item last">
<a
class="menu-link"
href="/brands/winnie-the-pooh.html"
><span>Winnie The Pooh</span></a
>
</li>
</ul>
Output i am getting: https://paste.pics/be37c962a84545356f416db149368a92
i want to achieve like the screen shot below: https://paste.pics/ff36dd98eb6fcf126004b581ac466f93

The approach is straightforward.
One queries a node list of all of a navigation/link-list's direct children ... document.querySelectorAll('.groupmenu-drop > li').
Following up one creates an Array.from this node list and mapss it into an array of mutated list-item elements which each gets assigned its text-content's first letter-character as value of an own data-first-char-attribute.
Then one reduces all items into an array of list-item elements which each start with a different letter than their directly preceding list-item.
Finally forEach collected new first-character list-item one adds a related class-name like new-first-char.
In the same time one would slightly change some selector rules
The ::before pseudo-element rendering would be covered by a changed rule like ...
.groupmenu-drop .level1.new-first-char::before {
content: attr(data-first-char);
}
... which targets every list-item that features a new-first-char class-name , and where the latter's content gets rendered by the value of this very element's data-first-char attribute.
The active/selected state of such pseudo-elements then just needs to be targeted by ...
.groupmenu-drop .level1.new-first-char.selected::before {
background-color: #166665;
color: #fef6eb;
}
One has to at least touch the list elements where the pseudo-element rendering takes place because one can not rely anymore on the OP's original content rendering via the counter css-function. This is due to the OP's design of a single flat/non-nested list which by the OP's original counter-functionality forces the continuous alphabetical pseudo-element enumeration for each list item.
Therefore it is best to target the pseudo-element rendering by just a class-name like new-first-char where the pseudo-element's content gets rendered from this very element's data-first-char attribute-value.
function init() {
const newFirstCharacterItems = Array
.from(
document
.querySelectorAll('.groupmenu-drop > li')
)
.map(elmNode => {
const textContent = elmNode
.querySelector('a > span')
?.textContent ?? '';
let char = textContent
.trim()
// https://www.regular-expressions.info/unicode.html#category
.match(/\p{L}/u) // first letter character.
?.[0] ?? '';
char = char
.toUpperCase();
elmNode
.dataset
.firstChar = char;
return elmNode;
})
.reduce(({ currentCharacter = '', result }, elmNode) => {
const char = elmNode
.dataset
.firstChar;
if (char !== '' && char !== currentCharacter) {
currentCharacter = char;
result
.push(elmNode);
}
return { currentCharacter, result };
}, { result: [] }).result;
newFirstCharacterItems
.forEach(elmNode =>
elmNode
.classList
.add('new-first-char')
);
}
init();
body { margin: 0; zoom: .7; }
.groupmenu-drop {
max-width: 900px;
margin: auto;
column-count: 4;
counter-reset: alphabeticList;
/* additional fix */
list-style: none;
}
#media (max-width: 767px) {
.groupmenu-drop {
column-count: 1;
margin-left: 40px;
}
}
#media (min-width: 768px) and (max-width: 1024px) {
.groupmenu-drop {
column-count: 2;
margin-left: 50px;
}
}
.groupmenu-drop > .level1 {
position: relative;
padding: 0 0 14px !important;
counter-increment: alphabeticList;
}
.groupmenu-drop > .level1 {
padding-bottom: 5px;
}
.groupmenu-drop > .level1 a {
font: 600 14px/30px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #166665;
}
/* slightly changed selector */
.groupmenu-drop .level1.new-first-char::before {
/*content: counter(alphabeticList, upper-alpha);*/
/* changed content rendering */
content: attr(data-first-char);
position: absolute;
top: 3px;
left: -40px;
border: 2px solid #166665;
text-align: center;
border-radius: 7px;
font: bold 21px/34px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #095352;
width: 27px;
height: 27px;
line-height: 23px;
}
/* slightly changed selector */
.groupmenu-drop .level1.new-first-char.selected::before {
background-color: #166665;
color: #fef6eb;
}
<ul class="groupmenu-drop slidedown">
<li class="level1 nav-1 item">
<a
class="menu-link"
href="/brands/angelcare.html"
><span>Angelcare</span></a
>
</li>
<li class="level1 nav-2 item selected">
<a
class="menu-link"
href="/brands/baby-art.html"
><span>Baby Art</span></a
>
</li>
<li class="level1 nav-3 item">
<a
class="menu-link"
href="/brands/barbie.html"
><span>Barbie</span></a
>
</li>
<li class="level1 nav-4 item">
<a
class="menu-link"
href="/brands/bibado.html"
><span>Bibado</span></a
>
</li>
<li class="level1 nav-5 item">
<a
class="menu-link"
href="/brands/boon.html"
><span>Boon</span></a
>
</li>
<li class="level1 nav-6 item">
<a
class="menu-link"
href="/brands/braun.html"
><span>Braun</span></a
>
</li>
<li class="level1 nav-7 item">
<a
class="menu-link"
href="/brands/diono.html"
><span>Diono</span></a
>
</li>
<li class="level1 nav-8 item">
<a
class="menu-link"
href="/brands/disney.html"
><span>Disney</span></a
>
</li>
<li class="level1 nav-9 item">
<a
class="menu-link"
href="/brands/dorel.html"
><span>Dorel</span></a
>
</li>
<li class="level1 nav-10 item">
<a
class="menu-link"
href="/brands/dr-brown-s.html"
><span>Dr Brown's</span></a
>
</li>
<li class="level1 nav-11 item">
<a
class="menu-link"
href="/brands/dreambaby.html"
><span>Dreambaby</span></a
>
</li>
<li class="level1 nav-12 item">
<a
class="menu-link"
href="/brands/dreamgenii.html"
><span>Dreamgenii</span></a
>
</li>
<li class="level1 nav-13 item">
<a
class="menu-link"
href="/brands/dumbo.html"
><span>Dumbo</span></a
>
</li>
<li class="level1 nav-14 item">
<a
class="menu-link"
href="/brands/earth-friendly-baby.html"
><span>Earth Friendly Baby</span></a
>
</li>
<li class="level1 nav-15 item">
<a
class="menu-link"
href="/brands/east-coast.html"
><span>East Coast</span></a
>
</li>
<li class="level1 nav-16 item selected">
<a
class="menu-link"
href="/brands/fisher-price.html"
><span>Fisher-Price</span></a
>
</li>
<li class="level1 nav-17 item">
<a
class="menu-link"
href="/brands/fisher-price-little-people.html"
><span>Fisher-Price Little People</span></a
>
</li>
<li class="level1 nav-18 item">
<a
class="menu-link"
href="/brands/flair.html"
><span>Flair</span></a
>
</li>
<li class="level1 nav-19 item">
<a
class="menu-link"
href="/brands/gift-wrap-accessories.html"
><span>Gift Wrap Accessories</span></a
>
</li>
<li class="level1 nav-20 item">
<a
class="menu-link"
href="/brands/halilit.html"
><span>Halilit</span></a
>
</li>
<li class="level1 nav-21 item">
<a
class="menu-link"
href="/brands/hey-clay.html"
><span>Hey Clay</span></a
>
</li>
<li class="level1 nav-22 item">
<a
class="menu-link"
href="/brands/hot-wheels.html"
><span>Hot Wheels</span></a
>
</li>
<li class="level1 nav-23 item">
<a
class="menu-link"
href="/brands/infantino.html"
><span>Infantino</span></a
>
</li>
<li class="level1 nav-24 item">
<a
class="menu-link"
href="/brands/janod.html"
><span>Janod</span></a
>
</li>
<li class="level1 nav-25 item">
<a
class="menu-link"
href="/brands/kaloo.html"
><span>Kaloo</span></a
>
</li>
<li class="level1 nav-26 item">
<a
class="menu-link"
href="/brands/keel-toys.html"
><span>Keel Toys</span></a
>
</li>
<li class="level1 nav-27 item">
<a
class="menu-link"
href="/brands/lalaboom.html"
><span>Lalaboom</span></a
>
</li>
<li class="level1 nav-28 item">
<a
class="menu-link"
href="/brands/lamaze.html"
><span>Lamaze</span></a
>
</li>
<li class="level1 nav-29 item">
<a
class="menu-link"
href="/brands/lansinoh.html"
><span>Lansinoh</span></a
>
</li>
<li class="level1 nav-30 item">
<a
class="menu-link"
href="/brands/leap-frog.html"
><span>Leap Frog</span></a
>
</li>
<li class="level1 nav-31 item">
<a
class="menu-link"
href="/brands/lindam.html"
><span>Lindam</span></a
>
</li>
<li class="level1 nav-32 item">
<a
class="menu-link"
href="/brands/little-bird-told-me.html"
><span>Little Bird Told Me</span></a
>
</li>
<li class="level1 nav-33 item">
<a class="menu-link" href="/brands/mam.html"
><span>MAM</span></a
>
</li>
<li class="level1 nav-34 item">
<a
class="menu-link"
href="/brands/mattel.html"
><span>Mattel</span></a
>
</li>
<li class="level1 nav-35 item">
<a
class="menu-link"
href="/brands/medela.html"
><span>Medela</span></a
>
</li>
<li class="level1 nav-36 item">
<a
class="menu-link"
href="/brands/mega-bloks.html"
><span>Mega Bloks</span></a
>
</li>
<li class="level1 nav-37 item">
<a
class="menu-link"
href="/brands/milton.html"
><span>Milton</span></a
>
</li>
<li class="level1 nav-38 item">
<a
class="menu-link"
href="/brands/munchkin.html"
><span>Munchkin</span></a
>
</li>
<li class="level1 nav-39 item">
<a
class="menu-link"
href="/brands/my-garden-baby.html"
><span>My Garden Baby</span></a
>
</li>
<li class="level1 nav-40 item">
<a
class="menu-link"
href="/brands/nuby.html"
><span>Nuby</span></a
>
</li>
<li class="level1 nav-41 item">
<a class="menu-link" href="/brands/nuk.html"
><span>NUK</span></a
>
</li>
<li class="level1 nav-42 item">
<a
class="menu-link"
href="/brands/philips-avent.html"
><span>Philips Avent</span></a
>
</li>
<li class="level1 nav-43 item">
<a
class="menu-link"
href="/brands/plasticine.html"
><span>Plasticine</span></a
>
</li>
<li class="level1 nav-44 item">
<a
class="menu-link"
href="/brands/playmobil.html"
><span>Playmobil</span></a
>
</li>
<li class="level1 nav-45 item">
<a
class="menu-link"
href="/brands/ragtales.html"
><span>Ragtales</span></a
>
</li>
<li class="level1 nav-46 item">
<a
class="menu-link"
href="/brands/safety-first.html"
><span>Safety First</span></a
>
</li>
<li class="level1 nav-47 item">
<a
class="menu-link"
href="/brands/schleich.html"
><span>Schleich</span></a
>
</li>
<li class="level1 nav-48 item">
<a
class="menu-link"
href="/brands/summer-infant.html"
><span>Summer Infant</span></a
>
</li>
<li class="level1 nav-49 item">
<a
class="menu-link"
href="/brands/swaddleme.html"
><span>SwaddleMe</span></a
>
</li>
<li class="level1 nav-50 item">
<a
class="menu-link"
href="/brands/taf-toys.html"
><span>Taf Toys</span></a
>
</li>
<li class="level1 nav-51 item">
<a
class="menu-link"
href="/brands/thomas-and-friends.html"
><span>Thomas and Friends</span></a
>
</li>
<li class="level1 nav-52 item">
<a
class="menu-link"
href="/brands/tiny-love.html"
><span>Tiny Love</span></a
>
</li>
<li class="level1 nav-53 item">
<a
class="menu-link"
href="/brands/tommee-tippee.html"
><span>Tommee Tippee</span></a
>
</li>
<li class="level1 nav-54 item">
<a
class="menu-link"
href="/brands/tomy.html"
><span>Tomy</span></a
>
</li>
<li class="level1 nav-55 item">
<a
class="menu-link"
href="/brands/vicks.html"
><span>Vicks</span></a
>
</li>
<li class="level1 nav-56 item">
<a
class="menu-link"
href="/brands/vital-baby.html"
><span>Vital Baby</span></a
>
</li>
<li class="level1 nav-57 item">
<a
class="menu-link"
href="/brands/vtech.html"
><span>vTech</span></a
>
</li>
<li class="level1 nav-58 item">
<a
class="menu-link"
href="/brands/we-made-me.html"
><span>We Made Me</span></a
>
</li>
<li class="level1 nav-59 item">
<a
class="menu-link"
href="/brands/widdop-bingham.html"
><span>Widdop Bingham</span></a
>
</li>
<li class="level1 nav-60 item last">
<a
class="menu-link"
href="/brands/winnie-the-pooh.html"
><span>Winnie The Pooh</span></a
>
</li>
</ul>

Suppose the HTML list is in the alphabet order. I will retrieve the list using the query selector method first. Then loop and compare the text inside, if the characters are different then add an active class to the element.
<div class="elate_brands">
<div class="groupdrop-link">
<div class="mainbrand-item item">
<a class="menu-link" href="#"><span>Albama</span></a>
</div>
<div class="mainbrand-item item">
<a class="menu-link" href="#"><span>Brittle</span></a>
</div>
<div class="mainbrand-item item">
<a class="menu-link" href="#"><span>Beat</span></a>
</div>
</div>
</div>
<script>
let elements = document.querySelectorAll('.mainbrain-item > .menu-link > span');
let firstLeter = '';
for (const element of elements) {
if(firstLeter !== element.text[0].toLowerCase()){
// select the parent element which is the div with mainbraind-item class
element.parentElement.parentElement.classList.add('active');
firstLeter = element.text[0].toLowerCase();
}
}
</script>
Updated based on the structure OP provided.
I added the .active selector in the css code
<style>
/* ..... */
.groupmenu-drop .level1.active:before {
content: counter(alphabeticList, upper-alpha);
position: absolute;
top: 3px;
left: -40px;
border: 2px solid #166665;
text-align: center;
border-radius: 7px;
font: bold 21px/34px 'Open Sans', sans-serif;
letter-spacing: 0px;
color: #095352;
width: 27px;
height: 27px;
line-height: 23px;
}
/* ... */
</style>
<ul class="groupmenu-drop slidedown">
<li class="level1 nav-1 item first">
<a class="menu-link" href="/brands/angelcare.html"><span>Angelcare</span></a>
</li>
<li class="level1 nav-2 item">
<a class="menu-link" href="/brands/baby-art.html"><span>Baby Art</span></a>
</li>
<li class="level1 nav-3 item">
<a class="menu-link" href="/brands/barbie.html"><span>Barbie</span></a>
</li>
</ul>
<script>
document.addEventListener("DOMContentLoaded", function () {
// code...
let elements = document.querySelectorAll('.groupmenu-drop > .item > .menu-link > span');
let firstLeter = '';
for (const element of elements) {
if (firstLeter !== element.textContent[0].toLowerCase()) {
let level1El = element.parentElement.parentElement;
level1El.classList.add('active');
firstLeter = element.textContent[0].toLowerCase();
}
}
});
</script>

Add class to ancestor element based on existence of element in the hierarchy

I have a sample code below
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
If one of the li has a class active how can I also add a class active on the parent li or this part
<li class="treeview">

You can use jquery to achieve this. Please find the snippet below.
$('.treeview-menu li').on('click', function() {
$(this).addClass('active');
$(this).closest('li.treeview').addClass('active');
})
.active>a {
color: green;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<ul>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
</ul>

If you need the entire treeview ancestry of an active <li> to have the class .active, you can use jQuery's :has:
$('.treeview:has(li.active)').addClass('active');
$('.treeview:has(li.active)').addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you need only the immediately closest treeview, you can use .closest():
$('.treeview li.active').closest(".treeview").addClass('active');
$('.treeview li.active').closest(".treeview").addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4 (Active)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

You don't want to select any li.active outside of the .treeview tree hierarchy:
$('.treeview li.active').closest('.treeview').addClass('active');

Sidebar list expand if its child list is active using jQuery

I have a list with sub-lists. Only the parent of active sub-lists has to expand and the rest of the list should be contracted.
<ul>
<li>A
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</li>
<li>B
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</li>
<li>C
<ul>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>8
</li>
<li>9
</li>
</ul>
</li>
</ul>
Here's a screenshot of what I mean.

Have a look at :focus-within css selector https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

You can do this using jQuery in simple Logic, Here is what I have done, hope it helps you.
$('li:has(ul)').click(function(event){
if (this == event.target) {
$(this).children().toggle('fast');
}
}).children().hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>A
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li><a href="../4.html" >4</a></li>
<li><a href="../5.html" >5</a></li>
<li>6</li>
</ul>
</li>
<li >B
<ul>
<li>1</li>
<li><a href="12.html" >2</a></li>
<li><a href="13.html" >3</a></li>
<li><a href="14.html" >4</a></li>
<li><a href="15.html" >5</a></li>
<li><a href="16.html" >6</a></li>
<li><a href="17.html" >7</a></li>
<li><a href="18.html" >8</a></li>
<li><a href="19.html" >9</a></li>
<li><a href="20.html" >10</a></li>
<li><a href="21.html" >11</a></li>
</ul>
</li>
<li >C
<ul>
<li>1
</li>
<li><a href="22.html" >2</a>
</li>
<li><a href="23.html" >3</a>
</li>
<li><a href="24.html" >4</a>
</li>
<li><a href="25.html" >5</a>
</li>
<li>6
</li>
<li><a href="27.html" >7</a>
</li>
<li><a href="28.html" >8</a>
</li>
<li><a href="29.html" >9</a>
</li>
</ul>
</li>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</ul>
</body>
</html>

Try Following
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<ul>
<li class="dropdown dropbtn">A
<ul class="dropdown-content">
<li>1</li>
<li>2</li>
<li>3</li>
<li><a href="../4.html" >4</a></li>
<li><a href="../5.html" >5</a></li>
<li>6</li>
</ul>
</li>
<br/>
<li class="dropdown dropbtn">B
<ul class="dropdown-content">
<li>1</li>
<li><a href="12.html" >2</a></li>
<li><a href="13.html" >3</a></li>
<li><a href="14.html" >4</a></li>
<li><a href="15.html" >5</a></li>
<li><a href="16.html" >6</a></li>
<li><a href="17.html" >7</a></li>
<li><a href="18.html" >8</a></li>
<li><a href="19.html" >9</a></li>
<li><a href="20.html" >10</a></li>
<li><a href="21.html" >11</a></li>
</ul>
</li>
<br/>
<li class="dropdown dropbtn">C
<ul class="dropdown-content">
<li>1
</li>
<li><a href="22.html" >2</a>
</li>
<li><a href="23.html" >3</a>
</li>
<li><a href="24.html" >4</a>
</li>
<li><a href="25.html" >5</a>
</li>
<li>6
</li>
<li><a href="27.html" >7</a>
</li>
<li><a href="28.html" >8</a>
</li>
<li><a href="29.html" >9</a>
</li>
</ul>
</li>
</ul>
For More Information Visit Hoverable Dropdown

jQuery(function($){
$(".menu-sidebar li a").click(function(event){
event.preventDefault();
$('.child-ul').hide();
$(this).next('ul').show();
});
});
.menu-sidebar .child-ul {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul class="menu-sidebar">
<li class="parent-li">A
<ul class="child-ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li><a href="../4.html" >4</a></li>
<li><a href="../5.html" >5</a></li>
<li>6</li>
</ul>
</li>
<li class="parent-li">B
<ul class="child-ul">
<li>1</li>
<li><a href="12.html" >2</a></li>
<li><a href="13.html" >3</a></li>
<li><a href="14.html" >4</a></li>
<li><a href="15.html" >5</a></li>
<li><a href="16.html" >6</a></li>
<li><a href="17.html" >7</a></li>
<li><a href="18.html" >8</a></li>
<li><a href="19.html" >9</a></li>
<li><a href="20.html" >10</a></li>
<li><a href="21.html" >11</a></li>
</ul>
</li>
<li class="parent-li">C
<ul class="child-ul">
<li>1
</li>
<li><a href="22.html" >2</a>
</li>
<li><a href="23.html" >3</a>
</li>
<li><a href="24.html" >4</a>
</li>
<li><a href="25.html" >5</a>
</li>
<li>6
</li>
<li><a href="27.html" >7</a>
</li>
<li><a href="28.html" >8</a>
</li>
<li><a href="29.html" >9</a>
</li>
</ul>
</li>
</ul>

Dropdown menu with hover/mouseover event in jQuery

I was trying to make and hover dropdown menu but I cant, well not really, I can make that the menu toggle just the specific items, with my code show all the items available:
Code here:
$(document).on('ready', function(){
var timeout = 0;
$('.nav').hover(function(){
$('.dropdown-menu').slideDown('fast');
},function(){
timeout = setTimeout(hideMenu,300);
});
$(".dropdown-menu").hover(function(){
clearTimeout(timeout);
},function(){
hideMenu();
});
});
function hideMenu(){
$(".dropdown-menu").slideUp('fast');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div id="cls">
<div class="navbar-header center">
<div class="navbar-header">
<img class="logo" src="paruno_logo.png">
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="n-smasd">
<ul>
<li class="dropdown-header title">Zapatos</li>
</ul>
<ul>
<li class="dropdown-header title">Botines</li>
</ul>
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Sandalias</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Casuales</li>
</ul>
<ul>
<li class="dropdown-header title">Mocasines</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ANGER</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">SOUL</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">URBAN</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ART</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ALAN ARROUND THE MUNDO</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a>
</li>
</ul>
</div>
<!-- /MB -->
</div>
</div>
</div>
To give more information, I use Bootstrap to make a responsive navbar and I don't want to use the Javascript from Bootstrap beacuse I want to get a pure Javascript.

Ok, don't know what do you mean by pure js when you using Jquery and bootstrap (which is using Jquery as well). But add that function to your code
$(document).on('mouseover','.dropdown-toggle',function(e){
$(this).parent('li').children('ul').slideDown('fast');
});
This will open dropdown menu. For hiding it you can research more.
Also I noticed that you have several elements with same id="drop-to". Id value should be unique! Name and class can be same on multiple elements.

horizontal menu submenu

I have a horizontal list menu and another horizontal list sub menu for each menu item.
Now when the page loads for the first time, first top menu with its sub menu and other top menus should show up and stay on if I mouse away or until i hover over other top menu item. As i hover over the other menus, their corresponding sub menus should show up.
Can someone show me how to do it using javascript or jquery or css only?
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li>
<li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<DIV class="tabcontainer">
<div id="sc1" class="tabcontent">
<ul>
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</div>
<div id="sc2" class="tabcontent">
<ul>
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</div>
<div id="sc3" class="tabcontent">
<ul>
<li><a id="link3-1" href="http://test.com">Link 3a</a></li>
<li><a id="link3-2" href="http://test.com">Link 3b</a></li>
</ul>
</div>
</DIV>

here's an example to point you in the right direction.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
ul, li
{
display: block;
}
.sublinks
{
display: none;
}
</style>
</head>
<body>
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1">
<a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a>
<ul class="sublinks">
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</li>
<li class="basictab1" id="li2">
<a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a>
<ul class="sublinks">
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<script>
$('.basictab1').hover(function()
{
$(this).find('ul').toggle();
});
</script>
</body>
</html>