如何在Boostrap 4中创建多级下拉列表

Question

我想用Bootstrap 4创建一个多级下拉列表，如下所示： 因此，当您将鼠标悬停在图标上时，下拉菜单会再次弹出，如果您将鼠标悬停在查看上，该子下拉菜单将会弹出并显示 Own （自己的）和< strong>共享 ...其余部分相同。

我找到了多个工作解决方案的线程，但仍然卡住了，无法解决。通常我使用bootstrap-dropdown-hove，它需要引导程序3，但是我当前的模板使用的是Bootstrap 4。

我相信根据需要进行多级下拉的代码如下：

<div class="dropdown">           
  <a class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img src="https://icon-library.com/images/icon-info/icon-info-4.jpg" style="width:25px; height:25px;">
      </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">     
        <li class="dropdown-submenu">
          <a  class="dropdown-item" tabindex="-1" href="#">View</a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="dropdown-item" href="#">Own</a>
              <ul class="dropdown-menu">
                  <li class="dropdown-item"><a href="#">OE15jAN</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="dropdown-item" href="#">Shared</a>
              <ul class="dropdown-menu">
                  <li class="dropdown-item"><a href="#">AXUh23</a></li>
              </ul>
            </li>
          </ul>
        </li>
      <li class="dropdown-divider"></li>
      <li class="dropdown-submenu">
          <a  class="dropdown-item" tabindex="-1" href="#">Create</a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="dropdown-item" href="#">Own</a>
              <ul class="dropdown-menu">
                  <li class="dropdown-item"><a href="#">OE15jAN</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="dropdown-item" href="#">Shared</a>
              <ul class="dropdown-menu">
                  <li class="dropdown-item"><a href="#">AXUh23</a></li>
              </ul>
            </li>
          </ul>
        </li>
      <li class="dropdown-divider"></li>
      <li class="dropdown-item"><a href="#">Share</a></li>
      </ul>
</div>

但仍未按需要显示。这是我在jsfiddle中的code。我删除了大多数模板内容，只在导航栏上保留了需要添加多级下拉菜单的标题。

能否请您指导我我在代码中做错了什么？非常感谢。