Bootstrap导航栏下拉菜单:hover/:focus背景色超出下拉Div范围问题求助

我在首页实现了一个带下拉元素的Bootstrap导航栏，现在遇到个小问题——打开下拉菜单的时候，:hover/:focus状态的背景色会超出下拉div的范围，具体情况可以看下面的示意图：

我的HTML代码如下：

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          下拉菜单示例
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">菜单项1</a></li>
          <li><a class="dropdown-item" href="#">菜单项2</a></li>
          <li><a class="dropdown-item" href="#">菜单项3</a></li>
        </ul>
      </li>
      <!-- 其他导航项可在此添加 -->
    </ul>
  </div>
</nav>

有没有大佬能帮忙看看怎么解决这个问题呀？就是想让下拉菜单里的选项在hover或者获得焦点的时候，背景色只在下拉菜单的div范围内显示，不要超出边界~

备注：内容来源于stack exchange，提问作者Rafaela