Bootstrap 4下拉子菜单下拉变化

Question

我正在使用Bootstrap 4按钮下拉列表。我想下拉菜单。使用这里讲述的dropup类How to get a Bootstrap dropdown submenu to 'dropup'，我仍然无法获得子菜单（我的代码中的Days and Hours）。

HTML

<div class="dropup">
    <button style="width:220px" class="btn btn-secondary dropdown-toggle    ml-auto" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Period</button>
       <ul class="dropdown-menu dropup multi-level" role="menu" aria-labelledby="dLabel" id="option2">
          <li class="dropdown-submenu others">Days
             <ul class="dropdown-menu bottom-up" id="days">
                <li class="dropdown-item option">1</li>
                <li class="dropdown-item option">2</li>
                <li class="dropdown-item option">3</li>
                <li class="dropdown-item option">4</li>
             </ul>
        </li>
        <li class="dropdown-submenu others">Hours
           <ul class="dropdown-menu" id="hours">
              <li class="dropdown-item option">1</li>
              <li class="dropdown-item option">2</li>
              <li class="dropdown-item option">3</li>
              <li class="dropdown-item option">4</li>
           </ul>
        </li>
     </ul>
 </div>

CSS

<style>
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

    .dropdown-submenu.pull-left>.dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }
</style>

提前感谢您的帮助！ ：）