CSS转换不适用于第二层/第三层子导航

我在纯CSS下拉菜单上遇到问题，希望有人能帮我

问题是，转换不适用于第二层或第三层子菜单

当我添加转换时，它在第一层下拉列表中运行良好，但由于某种原因，其他层被溢出：隐藏规则隐藏，我需要使用该规则才能使转换工作

代码如下：

.topBar {
    background: url(images/skin5/topnavBG.png) -10px -1px;
    height: 45px;

}

.topBar ul {
    list-style: none;

}

.topBar li {
    float: left;
    position:relative;
}

.topBar li a {
    text-decoration: none;
    display: block;
    width: 100px;
    color: white;
    margin-right: 1px;  
    line-height: 48px;
    text-transform: capitalize;
    text-align: center;

    border-right: 1px solid #000;
}

.topBar li a:hover {
    background: url(images/skin5/topnavBG.png) -70px -71px;

}


.topBar li a.current {
    background: url(images/skin5/topnavBG.png) -10px -71px;
    width: 70px;
    height: 45px;

}



.topBar ul li ul {
    position: absolute;
    top: 38px;
    display: block;
    z-index: 100;


}



.topBar ul li ul li {
    float: none;
    position: relative;

}

.topBar ul li ul li a {
    width: 155px;
    text-align: left;
    background: #111111;
    margin: 0;
    padding-left: 20px; 
    border-right: none;
    border-top: 1px solid #222222;
    font-size: 12px;
    line-height: 36px;


}

.topBar ul li ul li a:hover {   
  background: #222222;
  color: #EEEEEE;
}

.topBar ul li ul li ul {
    position:absolute;
    left: 100%; 
    top: 0;
}


.topBar ul li ul, .topBar ul li:hover ul li ul, .topBar ul li:hover ul li ul li ul {
    visibility: hidden; 
    opacity: 0;
    max-height: 0;
    -webkit-transition: max-height 1s linear;
    -moz-transition: max-height 1s linear;
    transition: max-height 1s linear;
    overflow: hidden;
}



.topBar ul li:hover ul, .topBar ul li ul li:hover ul, .topBar ul li ul li ul li:hover ul {
    visibility: visible;
    opacity: 1;
    max-height: 1000px;

}


 <div class="topBar">
    <nav id="mainNav" role="navigation">
        <ul>
            <li><a href="#" class="current ir">home</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">about us</a>
                 <ul>
                    <li><a href="#">Single Page</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Blog Entry</a></li>
                    <li><a href="#">Archive</a></li>
                    <li><a href="#">Sub Item 1</a></li>
                    <li><a href="#">Sub Item 2</a>
                         <ul>
                            <li><a href="#">Sub Item 2.1</a></li>
                            <li><a href="#">Sub Item 2.2</a></li>
                            <li><a href="#">Sub Item 2.3</a></li>
                            <li><a href="#">Sub Item 2.4</a>
                                <ul>
                                    <li><a href="#">Sub Item 2.1</a></li>
                                    <li><a href="#">Sub Item 2.2</a></li>
                                    <li><a href="#">Sub Item 2.3</a></li>
                                    <li><a href="#">Sub Item 2.4</a></li>
                                    <li><a href="#">Sub Item 2.5</a></li>
                                </ul>                            
                            </li>
                         </ul>                   
                    </li>
                 </ul>            
            </li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
  </div>

.topBar{
背景：url（images/skin5/topnavBG.png）-10px-1px；
高度：45px；
}
托巴保险公司{
列表样式：无；
}
李托巴先生{
浮动：左；
位置：相对位置；
}
托巴·李娜{
文字装饰：无；
显示：块；
宽度：100px；
颜色：白色；
右边距：1px；
线高：48px；
文本转换：大写；
文本对齐：居中；
右边框：1px实心#000；
}
.topBar li a:悬停{
背景：url（images/skin5/topnavBG.png）-70px-71px；
}
.顶杆李a.电流{
背景：url（images/skin5/topnavBG.png）-10px-71px；
宽度：70px；
高度：45px；
}
托巴·乌尔·李·乌尔{
位置：绝对位置；
顶部：38px；
显示：块；
z指数：100；
}
topBar ul li ul li先生{
浮动：无；
位置：相对位置；
}
topBar ul li ul li a先生{
宽度：155px；
文本对齐：左对齐；
背景:#111111；
保证金：0；
左侧填充：20px；
边界权：无；
边框顶部：1px实心#2222222；
字体大小：12px；
线高：36px；
}
topBar ul li a:悬停{
背景：#22222；
颜色：#EEEEEE；
}
.topBar ul li ul li ul{
位置：绝对位置；
左：100%；
排名：0；
}
.topBar ul li ul、.topBar ul li:悬停ul li ul、.topBar ul li:悬停ul li ul{
可见性：隐藏；
不透明度：0；
最大高度：0；
-webkit过渡：最大高度1s线性；
-moz过渡：最大高度1s线性；
过渡：最大高度1s线性；
溢出：隐藏；
}
.顶杆ul li:悬停ul.顶杆ul li:悬停ul.顶杆ul li:悬停ul.顶杆ul li:悬停ul{
能见度：可见；
不透明度：1；
最大高度：1000px；
}

我花了一整天的时间试图弄明白这一点，所以任何帮助都将不胜感激

谢谢 李：）

编辑：我刚刚添加了一个JSFIDLE并注释掉了转换，以显示下拉列表是否正常工作，如果您取消注释转换并尝试使用sub-nav，您将看到问题。我需要所有的子导航像第一层太阳导航那样向下滑动

---

您是如何尝试调试此程序的？调试？你的意思是在Firebug之类的开发工具中看看它吗？我的意思是你试着用它做什么？例如，您是否尝试过更改某些内容并查看会发生什么？是的，我尝试过更改周围的内容并使用不同的选择器，但每当我尝试为转换添加溢出：隐藏时，它会阻止第二层下拉列表显示。