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

尝试在上课之前在＆::中添加顶部和右侧位置。

&::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;
}

Answer 2

这里的解决方案真不错：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