Tengo la siguiente estructura para un menú desplegable con CSS puro:

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    
}

Ejemplo de jsFiddle

Todo funciona bien para el primer y segundo nivel del menú. Segundo nivel (.menu li ul) es dinámico, por lo que si la longitud de una opción ha cambiado, esto debería aumentar su ancho.

Ahí es exactamente de donde vino mi pregunta. Quiero que el tercer nivel siempre permanezca al final del segundo nivel, independientemente de lawidth de segundo nivel.

Intentaré hacerlo más claro con las siguientes imágenes.

Esto es lo que tengo ahora:

Esto es lo que sucede cuando aumenta la longitud de una opción:

A continuación se muestra cómo debe comportarse el menú:

¿Es esa una manera de hacerlo con CSS puro?

Si no, ¿cuál será mi mejor opción para lograr lo que quiero?

Gracias por adelantado.