JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://github.com/SunboX/mootools-fx-text/raw/master/Source/Fx.Text.js"></script>

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Where We Are</a></li>
    <li><a href="#">Account</a></li>
    <li><a href="#">Site Map</a></li>
    <li><a href="#">Security Policy</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS

body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; }
ul { margin: 0 0 0 5px; border-top: #666 1px solid; padding: 0; margin: 0; width: 200px; }
ul li { margin: 5px; border-bottom: #666 1px solid; padding: 0; margin: 0; background: #efefef; }
ul li a { display: block; color: #333; text-decoration: none; padding: 5px 0 5px 10px; width: 200px; line-height: 17px; height: 17px; }

JavaScript

$$('a').each(function(el){
    
    el.store('fx:text', new Fx.Text(el, { duration: 'short' }));
    
    el.addEvent('mouseenter', function(e){
        this.retrieve('fx:text').start('', this.get('text'));
    });
});