https://codepen.io/arvjungs-the-animator/pen/zxORxvo?editors=0100

<div class="collapse-btn">
  <a href="#"><i class="fa-solid fa-bars"></i></a>
  <ul class="collapse-menu">
    <li><a href="">Microsoft 365</a></li>
    <li><a href="">Teams</a></li>
    <li><a href="">Windows</a></li>
    <li><a href="">Surface</a></li>
    <li><a href="">Xbox</a></li>
    <li><a href="">支援</a></li>
    <li>
      <a href=""><span>軟體</span><i class="fa-solid fa-angle-down"></i></a>
      <ul>
        <li><a href="">Windows 應用程式</a></li>
        <li><a href="">AI</a></li>
        <li><a href="">OneDrive</a></li>
        <li><a href="">Outlook</a></li>
        <li><a href="">Skype</a></li>
        <li><a href="">OneNote</a></li>
        <li><a href="">Microsoft Teams</a></li>
      </ul>
    </li>
    <li>
      <a href=""
        ><span>個人電腦和設備</span><i class="fa-solid fa-angle-down"></i
      ></a>
      <ul>
        <li><a href="">電腦配件</a></li>
      </ul>
    </li>
    <li>
      <a href=""><span>娛樂</span><i class="fa-solid fa-angle-down"></i></a>
      <ul>
        <li><a href="">Xbox Game Pass Ultimate</a></li>
        <li><a href="">Xbox Live Gold</a></li>
        <li><a href="">Xbox 與遊戲</a></li>
        <li><a href="">電腦遊戲</a></li>
        <li><a href="">Windows 遊戲</a></li>
      </ul>
    </li>
    <li>
      <a href=""><span>商務適用</span><i class="fa-solid fa-angle-down"></i></a>
      <ul>
        <li><a href="">Microsoft Cloud</a></li>
        <li><a href="">Microsoft 安全性</a></li>
        <li><a href="">Azure</a></li>
        <li><a href="">Dynamics 365</a></li>
        <li><a href="">商務用Microsoft 365</a></li>
        <li><a href="">Microsoft 產業</a></li>
        <li><a href="">Microsoft Power Platform</a></li>
        <li><a href="">Windows365</a></li>
      </ul>
    </li>
    <li>
      <a href=""
        ><span>開發人員與 IT</span><i class="fa-solid fa-angle-down"></i
      ></a>
      <ul>
        <li><a href="">Microsoft 開發人員工具</a></li>
        <li><a href="">文件</a></li>
        <li><a href="">Microsoft Learn</a></li>
        <li><a href="">Microsoft 技術社群</a></li>
        <li><a href="">Azure MarketPlace</a></li>
        <li><a href="">AppSource</a></li>
        <li><a href="">Visual Studio</a></li>
      </ul>
    </li>
    <li>
      <a href=""><span>其他</span><i class="fa-solid fa-angle-down"></i></a>
      <ul>
        <li><a href="">Microsoft Rewards</a></li>
        <li><a href="">免費下載與安全性</a></li>
        <li><a href="">教育</a></li>
        <li><a href="">禮品卡</a></li>
        <li><a href="">Lisensing</a></li>
      </ul>
    </li>
    <li><a href="">檢視網站地圖</a></li>
  </ul>
</div>

在做手機板的menu時，發現在li加上border-bottom: 1px solid #e6e6e6;的樣式時，字會有點偏下的感覺，(感覺線會在視覺上吃掉空間)如下圖：

於是在a增添border-bottom: 1px dashed transparent;的樣式，可以讓元素往下推(透明的線線有空間)看起來就比較置中