JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
        <li><a href="#home">Home</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#photography">Photography</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#end">Contact</a></li>
    </ul>

CSS

body {
    background: black;
    color:white;
    font-family: Arial, Verdana,  Helvetica, sans-serif;
}

ul#nav {
    width:100%; 
    height:50px;
    padding: 15px 0 0 0; 
    margin: 0;
    color: #c1c1c1; 
    position:fixed;
    font-size:16px;
}

ul#nav li {
    float:none; 
    height: 50px;
}

ul#nav li a {
    color: #c1c1c1; 
    text-decoration:none;
    padding: 17px 5% 15px 5%;    
}
    
ul#nav li a:hover {
    width:120px; 
    height: 100%;
    margin: 0;
    color: #ffffff;
}

JavaScript

$(document).ready(function() {
    $('#nav li a').hover(function() {
        $(this).css({'background-image':'url("http://www.candlesandsupplies.net/Scarlet-Red-Color-Block-image.gif")'}).toggle().fadeIn('400');
    }, function() {
        $(this).css({'background-image': 'url("")'});

    });
});