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

Question

我在使用纯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>

我花了一整天时间试图解决这个问题，所以任何帮助都会非常感激。

由于 李：）

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

http://jsfiddle.net/CftNq/1/