JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nixboxdesigns.com/lib/jquery.easing.1.3.js"></script>
<script src="http://nixboxdesigns.com/lib/jquery.lavalamp-1.3.4b2.js"></script>
<ul id="menu">
    <li><a href="#home">Home</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<br><br><br>

<a class="contact" href="#contact">contact me!</a>

CSS

ul#menu {
    list-style:none;
    margin:5px;
    border:1px solid #333;
    padding:10px;
    overflow:auto; /* makes sure the container fits the floated list-items below */
}
ul#menu li{
    /* removed the positioning and z-index on the li, we no longer need them */
    margin:3px 5px;
    padding:5px 10px 4px;
    float:left; /* floats list items to the left, creating a horizontal menu */
    background-color:#aaa; /* add some background color to the line items */
}
ul#menu li a {
    position: relative; /* must have position set to anything other than static to use z-index */
    z-index: 5; /* 5 layers above all normal elements */
}
ul#menu li.backLava {
    position:absolute; /* this is automatically added by lavaLamp, if not set, but let's set it for good practice */
    z-index:3; /* 3 levels higher than all normal elements */
    background-color:#fc0;
    border:2px solid brown;
}

JavaScript

$(document).ready(function(){
    
    $('ul#menu').lavaLamp();
    
    $('.contact').click(function(){
        $('#menu a[href*=contact]').parent().trigger('mouseenter').trigger('click');
    });
    
});