CSS Dropdown

An attempt at a multi-level dropdown box in CSS. Problem with y-overflow.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="dropdown-container" data-content="Title">
  <ul>
    <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>

CSS

body {
    background: #ccc;
}
.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;
    list-style: none;
    margin: 0;
    max-height: 80px;
    overflow-x: visible;
    /*overflow-y: auto;*/
    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;
}