我的小屏幕导航栏下拉菜单出现问题-Bootstrap

Question

导航栏在大屏幕上似乎可以正常工作。您可以在下面看到它：

在小屏幕上，导航栏以这种方式转换：

但是，我无法访问以下gif所示的下拉菜单：

我该如何解决？

这是导航栏脚本，尽管有点混乱：

<nav class='navbar fixed-top navbar-expand-lg navbar navbar-dark' style='background-color:rgb(0,0,0);''>\
  \
  <style>\
  .underAnim:after{display:block; content:''; height:2px; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;} .underAnim:hover:after { width: 100%; left: 0; }\
  </style>\
  <a class='navbar-brand' href='MainPage.html'> \
    <img src='images/LogoEdits/2.JPG' width='150' height='80' style='margin-left:10%;' class='d-inline-block align-top' alt='Logo'>\
  </a>\
  \
  <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Toggle navigation'>\
    <span class='navbar-toggler-icon'></span>\
  </button>\
  \
  <div class='collapse navbar-collapse' style='margin-left:60px;' id='navbarNavDropdown'>\
    <ul class='navbar-nav'>\
      <li class='nav-item active'>\
        <a class='nav-link underAnim' href='MainPage.html'>ΑΡΧΙΚΗ<span class='sr-only'>(current)</span></a>\
      </li>  \
      <li class='nav-item'>\
        <a class='nav-link underAnim' href='offers.html'>ΠΡΟΣΦΟΡΕΣ</a>\
      </li>            \
      <li class='nav-item dropdown' style='height:35px;'>                \
        <a class='nav-link dropdown-toggle' href='Rooms.html' id='navbarDropdownMenuLink'  aria-haspopup='true' aria-expanded='false'>\
          ΔΩΜΑΤΙΑ                \
        </a>\
        \
        <div class='dropdown-menu' aria-labelledby='navbarDropdownMenuLink'>                    \
          <style>.dropdown-item{transition:0.4s;} .dropdown-item:hover{background-color:rgb(30,144,255);color:white;}</style><a class='dropdown-item' href='standard-room.html'>Standard Δωμάτιο</a>                    \
          <a class='dropdown-item' href='family-room.html'>Οικογενειακό Δωμάτιο</a>\
          <a class='dropdown-item' href='executive-room.html'>Executive Δωμάτιο</a>                    \
          <a class='dropdown-item' href='superior-suite.html'>Superior Σουίτα</a>                    \
          <a class='dropdown-item' href='family-suite.html'>Οικογενειακή Σουίτα</a>                    \
          <a class='dropdown-item' href='executive-suite.html'>Executive Σουίτα</a>                    \
          <a class='dropdown-item' href='president-suite.html'>Προεδρική Σουίτα</a>                \
        </div>            \
      </li>            \
      <li class='nav-item'>              \
        <a class='nav-link underAnim'href='photosLightBox.html'>ΦΩΤΟΓΡΑΦΙΕΣ</a>            \
      </li>            \
      <li class='nav-item dropdown' style='height:35px;'>                \
        <a class='nav-link dropdown-toggle' href='theHotel.html' id='navbarDropdownMenuLink'  aria-haspopup='true' aria-expanded='false'>                   \
          ΤΟ ΞΕΝΟΔΟΧΕΙΟ                \
        </a>                \
        <div class='dropdown-menu' aria-labelledby='navbarDropdownMenuLink'>                    \
          <a class='dropdown-item' href='hotel-location.html'>Τοποθεσία Ξενοδοχείου</a>                    \
          <a class='dropdown-item' href='services.html'>Υπηρεσίες</a>                    \
          <a class='dropdown-item' href='experience.html'>Εμπειρία</a>                \
        </div>            \
      </li>            \
      \
      \
      <li class='nav-item' style='margin-left:100px; margin-top:6px;'>                    \
        <a href='Reservations.html' class='btn btn-info prim' role='button' \
        style='white-space: nowrap; text-align: center;'>ΚΑΝΤΕ ΚΡΑΤΗΣΗ</a>            \
      </li>          \
    </ul>        \
  </div>      \
</nav>