Questo è un workaround piuttosto noioso: HTML scrive gli elementi, da sinistra verso destra dall'alto verso il basso, quindi se ampli o diminuisci la larghezza l'effetto sarà sempre con il bordo a sinistra fisso, a meno che non usi margin auto, ma in quel caso, resterebbe al centro.

Per fare quello che vuoi hai due opzioni:
1- usare float:right; sull'elemento, così forzi il bordo destro a restare fermo, e l'effetto sarà corretto
2- Usre Fx.Morph (equivalente nella versione Mootools1.2 di Fx.Styles) per modificare contemporaneamente width e margin-left (diminuisci il primo ed aumenti il secondo o viceversa) dello stesso valore.

Ho fatto una cosa molto simile, ma dal basso verso l'alto qui:
http://artorius.netsons.org/new/inde...ffetto-su-menu

In fondo alla pagina c'è il link per la demo.