JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
    
<ul id="nav">

    <li>about us</li>
    <li>news</li>
    <li>services</li>
    <li>area profiles</li>
    <li>book a valuation</li>
    <li>testimonials</li>
    <li>contact</li>

</ul>
</div>

CSS

#navigation ul {
position: absolute;
right: 0;
bottom: 10px;
height: 30px;
list-style: none;
}

#navigation ul li {
display: inline-block;
margin-right: 20px;
text-transform: uppercase;
color: #FFF;
font-size: 12px;
height: 30px;
line-height: 30px;
text-align: left;
list-style: none;
background: #C00;
}

JavaScript

var $nav = $('#nav'), $lis = $nav.find('li');

$lis.each(function() {
     $(this).attr('data-realwidth', $(this).width());
 });

$nav.on('mouseenter', function() {  
    $lis.stop().animate({width:150});
});

$nav.on('mouseleave', function() {
    $lis.stop().each(function() {
         $(this).animate({width: $(this).data('realwidth')});
     });
});