Многоуровневое динамическое всплывающее меню

У меня есть следующая структура для всплывающего меню с чистым 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

Все отлично работает для первого и второго уровней меню. Второй уровень (.menu li ul) является динамическим, поэтому, если длина параметра изменилась, это должно увеличить его ширину.

Именно отсюда и возник мой вопрос. Я хочу, чтобы третий уровень всегда оставался в конце второго уровня, независимо отwidth второго уровня.

Я постараюсь прояснить это с помощью следующих изображений.

Вот что у меня сейчас:

Вот что происходит, когда длина опции увеличивается:

Вот как должно вести себя меню:

Это способ сделать это с чистым CSS?

Если нет, то каким будет мой лучший выбор для достижения того, чего я хочу?

Заранее спасибо.

Ответы на вопрос(1)

Ваш ответ на вопрос