css - Multi level dynamic flyout menu -

i have following structure flyout menu 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 {    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: .2s ease-in-out;     transition: .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 {        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 working fine first , second levels of menu. second level (.menu li ul) dynamic if length of option has changed should increase width.

that's question came from. want third level stays @ end of second level, regardless width of second level.

i'll try make more clear following images.

this have now:

here happens when lenght of option increased:

following how menu should behave:

is way pure css?

if not, best choice achieve want?

thanks in advance.

http://jsfiddle.net/f66mm/ seems work. did 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 {    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: .2s ease-in-out;     transition: .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 {        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; }