Детальное управление прокруткой переполнения для CSS не работает

Question

Я пытаюсь создать раскрывающийся список CSS, но не могу получить правильное переполнение.

В следующем коде, когда вы нажимаете раскрывающийся список> наведите курсор на «дополнительные параметры»> наведите курсор на «еще больше», overflow-x: visible; overflow-y: auto не соблюдается.

Как настроить правильную прокрутку, т. Е. Прокрутить вертикально, если необходимо, но сделать горизонтальные элементы видимыми (не скрытыми с помощью полосы прокрутки)?

Есть липоведение браузера я не понимаю?Протестировано это в Chrome и Firefox с одинаковым результатом.

Скриптовая ссылка: http://jsfiddle.net/er7s2tw0/9/

Мой код:

.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;
  height: 120px;
  overflow-x: visible;
  overflow-y: auto;
}

.dropdown-submenu>.dropdown-menu-3 {
  height: 196px;
}

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

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.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;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="dropdown">
      <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
        Dropdown <span class="caret"></span>
      </a>
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li><a href="#">Some action</a></li>
        <li><a href="#">Some other action</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
          <a tabindex="-1" href="#">More Options</a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li class="dropdown-submenu">
              <a href="#">Even More..</a>
              <ul class="dropdown-menu dropdown-menu-3">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
              </ul>
            </li>
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li><a tabindex="-1" href="#">Second level</a></li>

            <li><a tabindex="-1" href="#">Second level</a></li>
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li><a tabindex="-1" href="#">Second level</a></li>
            <li><a href="#">Second level</a></li>
            <li><a href="#">Second level</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>