Rails5 bootstrap4 : ナヴィゲーションバーのdropdownが表示されない

Question

bootstrap4とRails5でアプリケーションを作成しております

ナビゲーションバーにdropdownを作成したいのですが、dropdownをクリックしてもdropdownメニューが表示されません
いろいろ検索してみたのですが解決には至りませんでしたので、お力を貸していただけると幸いです

以下にコードを添付します
問題点がございましたら、ご教授お願いいたします

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets

_navigation_bar.html.erb

<header>
  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <%= link_to "Shinshu Fiber Class", root_path, class: 'navbar-brand' %>
    <div id="Navber">
      <ul class="navbar-nav">
        <% if user_signed_in? %>
          <li class="nav-item active">
            <%= link_to 'アカウント編集', edit_user_registration_path, class: 'nav-link' %>
          </li>
          <li class="nav-item active">
            <%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: 'nav-link' %>
          </li>
          <li class="nav-item active">
            <%= link_to "授業一覧", classrooms_path, class: 'nav-link' %>
          </li>
          <li class="nav-item active">
            <%= link_to "サークル作成", new_club_path, class: 'nav-link' %>
          </li>
          <li class="nav-item active">
            <%= link_to "ユーザ一覧", users_path, class: 'nav-link' %>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          <li>
      <% else %>
          <li class="nav-item active">
            <%= link_to "新規登録", new_user_registration_path, class: 'nav-link' %>
          </li>
          <li class="nav-item active">
            <%= link_to "ログイン", new_user_session_path, class: 'nav-link' %>
          </li>
      <% end %>
      </ul>
    </div>
  </nav>
</header>

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 @import "bootstrap";

 a {
   text-decoration: none;
 }

Comments

[no1knows]

<li><% else %>は</li><% else %>が適切かと思います。

[rikuou]

回答ありがとうございます。
</li><% else %>に修正後、試してみましたがうまくいきませんでした。。。

[no1knows]

切り分けのため、下記をペーストして、きちんと動くか確認してみてください。

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

参考：https://getbootstrap.jp/docs/4.2/components/dropdowns/