可滚动性使弹出菜单变得混乱

如何解决可滚动性使弹出菜单变得混乱

当我向其添加可滚动功能时，我的可滚动弹出菜单变得一团糟。
这样做时，子菜单不会在前一个的一侧飞出/打开，而是被拉到悬停菜单旁边并隐藏，但可滚动。

到目前为止我的代码：

一个表格示例：

<div id='flyout_menu'>

<ul>
 <li><a href="#"> 1.1</a>
   <ul>
      <li><a href="#">2.1</a></li>
      <li><a href="#">2.2</a></li>
      <li><a href="#">2.3</a></li>
      <li><a href="#">2.4</a>
         <ul>
            <li><a href="#">3.1</a></li>
            <li><a href="#">3.2</a></li>
            <li><a href="#">3.3</a></li>
            <li><a href="#">3.4</a></li>
         </ul>
       </li>

   <li><a href="#">2.5</a>
    <ul>
      <li><a href="#">3.5</a></li>
    </ul>
  </li>
</ul>
</li>

<li><a href="#">1.2</a>

<li><a href="#">1.3</a>
</ul>
</div>

我目前的 CSS：

#flyout_menu{

font-weight: 500;
min-width: 180px;
float: left;
margin: 0px;
padding: 0px;
Box-shadow: 2px 5px 4px 0px grey;
}

#flyout_menu ul,dl,li{
list-style: none;
margin: 0;
padding: 0;
}

#flyout_menu ul li.hover,#flyout_menu ul li:hover { position: relative; z-index: 599;}
#flyout_menu ul dl.hover,#flyout_menu ul dl:hover { position: relative; z-index: 599;}

#flyout_menu ul li ul {
visibility: hidden;
display: none;
position: absolute;
z-index: 598;
max-height: 500px;
top: 0; left: 100%;}

#flyout_menu ul li:hover > ul { visibility: visible; display: block; Box-shadow: 2px 5px 4px 0px grey}

#flyout_menu ul li ul { overflow-y: scroll;}



#flyout_menu ul li ul li.hover { position: relative; z-index: 599;}
#flyout_menu ul li ul li.hover { position: relative; z-index: 599;}

#flyout_menu ul li ul li ul {

visibility: hidden;
display: none;
position: absolute;
z-index: 598;
max-height: 500px;
top: 0; left: 100%;}

#flyout_menu ul li ul li:hover > ul { visibility: visible; display: block; Box-shadow: 2px 5px 4px 0px grey}

#flyout_menu ul li ul li ul { overflow-y: scroll;}


#flyout_menu ul li ul li ul li.hover,#flyout_menu ul li ul li ul li:hover { position: relative; z-index: 599;}

#flyout_menu ul li ul li ul {

visibility: hidden;
display: none;
position: absolute;
z-index: 598;
max-height: 500px;
top: 0; left: 100%;}

#flyout_menu ul li ul li:hover > ul { visibility: visible; display: block; Box-shadow: 2px 5px 4px 0px grey}

#flyout_menu ul li ul li ul { overflow-y: scroll;}


#flyout_menu span,#flyout_menu a{

display: inline-block;
font-family: "Verdana";
font-size: 14px;
text-decoration: none;
}

#flyout_menu li{
background: #696969}

#flyout_menu li:hover,#flyout_menu li.active { background: #969696}
#flyout_menu dl:hover,#flyout_menu dl.active { background: #969696}

#flyout_menu a {

color: #FFF;
line-height: 160%;
padding: 16px 8px 16px 14px;
width: 164px}

#flyout_menu ul ul li {

background: #696969;
border-bottom: 1px solid #969696}

#flyout_menu ul ul li:hover {background: #969696}

#flyout_menu ul dl{
background: #696969;
border-top: 1px solid #969696;
padding: 0;
margin: 0}

没有：

1. 为ul ul & ul ul ul &设置最大高度
2. 使其溢出-y:scroll; 它工作得很好，但是一旦添加它们，它就会变得一团糟。哦，是的，还有：
3. 使其溢出-x:hidden; 并不能解决问题，只会让内容根本无法访问。

谁能帮我解决这个问题？ 很多坦克。