Legördülő listák végére lefelé mutató háromszögek beszúrása

Legördülő listák végére lefelé mutató háromszögek beszúrása
2021-08-07T22:49:17+02:00
2021-08-07T23:29:47+02:00
2022-10-15T21:25:40+02:00
*deleted_23419333
Sziasztok!

Hogyan lehetne azt megoldani, hogy a legördülő menüknél a menü név végére kerüljön egy lefelé mutató háromszög?

Például:

B helyett: B ▾

A .menu-item-has-children osztályú elemek az érintettek.

Ha megoldható, akkor JS nélkül.

<ul id="menu-header" class="menu"> <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="#">A</a></li> <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-25"><a href="#">B</a> <ul class="sub-menu"> <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">B1</a></li> <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="#">B2</a></li> </ul> </li> <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#">C</a></li> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">D</a> <ul class="sub-menu"> <li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="#">D1</a></li> </ul> </li> <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="#">E</a></li> </ul>

Köszönöm.
Mutasd a teljes hozzászólást!
.menu-item-has-children:after { content: url('triangle.svg'); position: relative; top: 1px; }
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd