avoiding nested selectors to boost performance
dropdown menus can get messy fast with lots of nesting.
instead use a single class on both parent li's & child uls:
<li class="dropdown">Main Menu</li><ul class="menu dropdown"><li>Sub Item1<!-- Repeat for subitems -->
then style using :has() and adjacent sibling selectors. much cleaner!
. dropdown {position: relative;}. menu. has(. submenu)> li::after { content:"\e259"; }. submenu. dropdown:hover>. sub-menu{ display:block; }this approach keeps your html simple & prevents potential performance issues from heavy nesting.
bonus - easier to maintain and debug!