设置溢出-y自动也会设置溢出-x

Question

我试图制作一个下拉菜单，其中子菜单水平显示，也可以垂直滚动。

除了滚动之外，我一切都正常了。

.dropdown-container {
  background: white;
  border: 1px solid #666;
  cursor: pointer;
  line-height: 24px;
  height: 24px;
  position: relative;
  width: 150px;
}
.dropdown-container a {
  color: black;
  padding: 0 10px;
  text-decoration: none;
}
.dropdown-container:after {
  color: #666;
  content: '\f107';
  font-family: FontAwesome;
  position: absolute;
  right: 2px;
  top: 0px;
} 
.dropdown-container:before {
  content: attr(data-content);
  padding: 0 10px;
}
.dropdown-container li > a:not(:only-child):after {
  content: '\f105';
  font-family: FontAwesome;
  position: absolute;
  right: 4px;
  top: 0px;
}
.dropdown-container ul {
  background: white;
  border: 1px solid #666;
  display: none;
  right: 1px; /*Why is it being nudged 1px right relative to parent?*/
  list-style: none;
  margin: 0;
  max-height: 80px;
  overflow-x: visible;
  overflow-y: auto; /*This is the problematic line, remove this and the rest works*/
  padding: 0;
  position: relative;
  width: 100%;
}
.dropdown-container:hover > ul {
  display: block;
}
.dropdown-container ul li {
  background: white;
  position: relative;
}
.dropdown-container ul li:hover {
  background: rgba(173, 216, 230, 0.6);
}
.dropdown-container ul li:hover > ul {
  display: block;
}
.dropdown-container ul ul {
  display: none;
  position: absolute;
  left: 150px;
  width: 150px;
  top: -1px; /*Another 1px adjustment required, why aren't they already aligned?*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="dropdown-container" role="nav" data-content="Title">
  <ul class="dropdown">
    <li>
      <a href="#">Select 1</a>
    </li>
    <li>
      <a href="#">Select 2</a>
      <ul>
        <li>
          <a href="#">Select 2.1</a>
          <ul>
            <li>
              <a href="#">Select 2.1.1</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Select 2.2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Select 3</a>
    </li>
    <li>
      <a href="#">Select 4</a>
    </li>
  </ul>
</div>

请参见JSfiddle here。 但是，如果我将overflow-y上的<ul>设置为自动以启用滚动功能，则子菜单将如上面的代码段一样被隐藏。

我相信问题与this问题相同：当overflow-y: auto和overflow-x: visible时，overflow-x也被视为自动。

不幸的是，建议的解决方案（将<ul>包裹在position: relative元素中）对我不起作用。

有人知道其他解决方法吗？