我正面臨一個在我的網站上顯示菜單的代碼問題。在筆記本電腦上的Safari瀏覽器上，菜單是不可見的，而在移動設備上，下拉菜單的圖標出現在徽標下方。 有人能指導我如何解決這個問題嗎？我會很感激任何關于是什么導致了這種差異以及如何解決它的建議或見解。

提前感謝您的幫助！

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end  " id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item ">
            <a class="nav-link active" href="#menu">Menu</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link active" href="#gallery">gallery</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link active" href="#contact">Contact</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              PL/ENG/DE
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="index.html">Polski</a></li>
              <li><a class="dropdown-item" href="eng.html">English</a></li>
              <li><a class="dropdown-item" href="de.html">German</a></li>

```

I tried to add:

/\* Safari specific styles */
@supports (-webkit-touch-callout: none) {
/* Add Safari-specific styles here \*/
.navbar-nav {
display: -webkit-box;
display: flex;
}

.navbar-collapse {
\-webkit-overflow-scrolling: touch;
overflow-y: auto;
}