Ich habe folgende Struktur für ein Flyout-Menü mit reinem 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 Beispiel

Alles funktioniert gut für die erste und zweite Ebene des Menüs. Zweites Level (.menu li ul) ist dynamisch. Wenn sich die Länge einer Option geändert hat, sollte sich ihre Breite erhöhen.

Genau hierher kam meine Frage. Ich möchte, dass die dritte Ebene immer am Ende der zweiten Ebene bleibt, unabhängig von derwidth der zweiten Ebene.

Ich werde versuchen, es mit den folgenden Bildern klarer zu machen.

Das habe ich jetzt:

Folgendes passiert, wenn die Länge einer Option erhöht wird:

Das Menü sollte sich wie folgt verhalten:

Ist das ein Weg, um es mit reinem CSS zu tun?

Wenn nicht, was ist meine beste Wahl, um das zu erreichen, was ich will?

Danke im Voraus.