多级动态弹出菜单

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。

我将尝试使用以下图片更清晰。

这就是我现在所拥有的：

以下是选项长度增加时会发生的情况：

以下是菜单的行为方式：

这是用纯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;
}