Multi level dynamic flyout menu

Question

I have the following structure for a flyout menu with pure 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

Everything is working fine for the first and second levels of the menu. Second level (.menu li ul) is dynamic so if the length of an option has changed this should increase its width.

That's exactly where my question came from. I want that the third level always stays at the end of the second level, regardless the width of second level.

I'll try to make it more clear with the following images.

This is what I have now:

Here is what happens when the lenght of an option is increased:

Following is how the menu should behave:

Is that a way to do it with pure CSS?

If not, what will be my best choice to achieve what I want?

Thanks in advance.

Answer 1

http://jsfiddle.net/f66MM/ This seems to work. All I did was change left:100% in li ul li ul

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: #ffffd;
    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;
}