多级动态弹出菜单

Question

对于带有纯 CSS 的弹出菜单，我有以下结构：

HTML

<ul class="menu">
    <li><a href="#">Base</a>        
        <ul>
            <li><a href="#">Clients</a>                
                <ul>
                    <li><a href="#">New</a></li>
                    <li><a href="#">Edit</a></li>
                    <li><a href="#">Delete</a></li>
                </ul>
            </li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Employees</a></li>
        </ul>
    </li>
    <li><a href="#">Search</a></li>
    <li><a href="#">System</a></li>
</ul>

CSS

a {text-decoration: none; font-family: verdana; font-size: 12px}
ul{list-style: none; padding:0; margin:0}

.menu {
    margin:0; padding:0;
    width: 100%; height: auto; 
    background: #ccc;    
    position: absolute;
    top:0; left:0;   
}
.menu li {
    float:left;
    display:block
}
.menu li li {
    float:none;
}
.menu li a {
   padding: 0 5px;   
}
.menu li a:hover {
    background: #bbb
}
.menu li ul {
    padding:0; margin:0;
    background: #ddd;
    width: auto;
    position: absolute;    
    visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0;
    margin: 20px 0 0 0;    
}
.menu li:hover ul {
    margin:0;
    opacity: 1;
    visibility: visible;
    display:block
}
.menu li ul li {
    clear:both   
}
.menu li ul li a {   
    width: auto;
    display:block;
}
.menu li ul li ul {
    position: absolute;       
    top: 0; left: 72px;    
    margin: 0 0 0 20px;
    display: block;
    visibility: hidden;
    opacity: 0
}
.menu li ul li ul li {
    position: relative;
    display:none;
    visibility: hidden;
    opacity: 0
}
.menu li ul li:hover ul li {
    visibility: visible;
    opacity: 1;
    display:block    
}

jsFiddle example

菜单的第一级和第二级一切正常。 第二级 (.menu li ul) 是动态的，因此如果选项的长度发生了变化，这应该会增加其宽度。

这正是我的问题的来源。我希望第三级总是停留在第二级的末尾，不管第二级的width。

我会尝试通过以下图片使其更清晰。

这就是我现在拥有的：

这是增加选项的Lenght时发生的情况：

以下是菜单的行为方式：

这是用纯 CSS 实现的方法吗？

如果没有，实现我想要的最佳选择是什么？

提前致谢。

Answer 1

http://jsfiddle.net/f66MM/ 这似乎有效。我所做的只是在 li ul li ul 中更改 left:100%

a {text-decoration: none; font-family: verdana; font-size: 12px}
ul{list-style: none; padding:0; margin:0}

.menu {
    margin:0; padding:0;
    width: 100%; height: auto; 
    background: #ccc;    
    position: absolute;
    top:0; left:0;   
}

.menu li {
    float:left;
    display:block
}

.menu li li {
    float:none;
}

.menu li a {
   padding: 0 5px;   
}

.menu li a:hover {
   background: #bbb
}

.menu li ul {
    padding:0; margin:0;
    background: #ddd;
    width: auto;
    position: absolute;    
    visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0;
    margin: 20px 0 0 0;    
}

.menu li:hover ul {
    margin:0;
    opacity: 1;
    visibility: visible;
    display:block
}

.menu li ul li {
    clear:both   
}

.menu li ul li a {   
    width: auto;
    display:block;
}

.menu li ul li ul {
    position: absolute;       
    top: 0; left: 100%;    
    margin: 0 0 0 20px;
    display: block;
    visibility: hidden;
    opacity: 0
}

.menu li ul li ul li {
    position: relative;
    display:none;
    visibility: hidden;
    opacity: 0
}

.menu li ul li:hover ul li {
    visibility: visible;
    opacity: 1;
    display:block;
}