CSS вложенное выпадающее меню - размещение стрелки вниз в конце имени каждого выпадающего элемента

Question

Я учусь создавать вложенное раскрывающееся меню, используя CSS.

Я хочу разместить стрелку вниз в конце каждого выпадающего элемента. Вот так:

Dropdown A[down arrow]
Nested dropdown B[down arrow]

Сейчас ширина и высота каждого элемента списка различаются в зависимости от высоты и ширины подсписка внутри. Это затрудняет размещение стрелки вниз сразу после имени элемента.

<div class="menu">
   <ul>
     <li>
       Dropdown A
       <ul>
         <li class="link">
           <a href="">Im a link</a>
         </li>
         <li class="link">
           <a href="">Im a link</a>
         </li>
         <li>
           Nested dropdown
           <ul>
             <li class="link">
               <a href="">Im a link</a>
             </li>
             <li class="link">
               <a href="">Im a link</a>
             </li>
           </ul>
         </li>
       </ul>
     </li>
     <li>
       Dropdown B
       <ul>
         <li class="link">
           <a href="">Im a link</a>
         </li>
         <li class="link">
           <a href="">Im a link</a>
         </li>
         <li>
           Nested dropdown
           <ul>
             <li class="link">
               <a href="">Im a link</a>
             </li>
             <li class="link">
               <a href="">Im a link</a>
             </li>
             <li>
                Nested dropdown B
                 <ul>
                   <li class="link">
                     <a href="">Im a link</a>
                   </li>
                   <li class="link">
                     <a href="">Im a link</a>
                   </li>
                   <li>
                     Nested dropdown C
                     <ul>
                       <li class="link">
                         <a href="">Im a link</a>
                       </li>
                       <li class="link">
                         <a href="">Im a link</a>
                       </li>
                     </ul>
                   </li>
                 </ul>
               </li>             
           </ul>
         </li>
       </ul>
     </li>     
     <li class="link">Simple Link</li>
     <li class="link">Another Link</li>
   </ul>
</div>

// refer to: https://dev.to/felipperegazio/building-a-pure-css-menu-with-nested-dropdowns-hcn

.menu > ul
{
  display: flex;
  justify-content: space-evenly;
  height: 40px;

  li
  {
    position: relative;
    background: lightgoldenrodyellow;

    &::before
    {
      // draw down arrow
      content: '';
      width: 0; 
      height: 0; 
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #FFA500;
      position: absolute;
      // I WANT TO PLACE THIS RIGHT NEXT TO THE LIST ITEM NAME


    }
    &.link {
      // links dont need arrow
      &::before {
        display: none;
      }      
    }

    ul
    {
      visibility: hidden;
      opacity: 0;
    }

    &:hover > ul
    {
      visibility: visible;
      opacity: 1;
    }
  }
}

ul
{
  list-style: none;
}

Вы можете увидеть живое демо здесь: https://codepen.io/loganlee/pen/ExjYRyb?editors=1100

Answer 1

Действительно хорошее решение проблемы здесь: https://htmldog.com/techniques/dropdowns/

Заменен код с кодом по ссылке выше. Это здорово!

Все, что мне нужно было сделать, это

li {
    float: left;
    display: inline;
    position: relative;
    width: 150px;
    list-style: none;

  &::after
  {
    // draw down arrow
    content: '';
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FFA500;
    display: inline-block;
  }

  &.link {
    // links dont need arrow
    &::after {
      display: none;
    }      
  }
}

Убедитесь, что li::after { display: inline-block; }

Как всегда, здесь исправлено демо: https://codepen.io/loganlee/pen/ExjYRyb?editors=1100

Answer 2

Попробуйте добавить верхнюю и правую позиции в & :: перед классом.

&::before
{
  content: '';
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #FFA500;
  position: absolute;
  top: 18px;
  right: 15px;
}