JSFiddle - React, Tailwind, and code Playground

HTML

<div class="backbox">
<p></p>
</div>

<div class="wrap">
<img class="allcategoriesBTN" src="http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2">
<img class="allcategoriesBTNOVER" src="http://www.mediafire.com/convkey/fd56/22sleb09keyvun0fg.jpg?size_id=2">
<img class="background" src="http://www.mediafire.com/convkey/776f/fdgp9qoddeq0ykmfg.jpg?size_id=5">
<a class="exp" href="#url" tabindex="1"></a>
<ol class="sublist">
    <li>Fork Suspension (All)</li>
    <li><a href="">Front Forks</a></li>
</ol>
<ul class="list">
    <li class="fs1"><a href="">FS1</a></li>
    <li id="c1"><a href="">C1</a></li>
    <li id="wt1"><a href="">WT1</a></li>
    <li id="a1"><a href="">A1</a></li>
</ul>
</div>

CSS

html {-webkit-animation: safariSelectorFix infinite 1s;}
		@-webkit-keyframes safariSelectorFix {
		0% {zoom:1;} 
		100% {zoom:1;}
		}
		
		/* Line Brake (All Buttons) */
		img.background {visibility: hidden; z-index: 100;}
		img.allcategoriesBTNOVER {visibility: hidden;}
		img.allbrandsBTNOVER {visibility: hidden;}
		img.mtbbikesBTNOVER {visibility: hidden;}
		img.roadbikesBTNOVER {visibility: hidden;}
		.wrap ul {visibility: hidden; position: absolute; top: 2em; left: -1.7em; z-index: 500; line-height:300%; font-weight:800;
				  list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000;}
		a:hover, a:visited, a:link, a:active {color: #222; text-decoration: none;}
		.wrap:hover > ul {visibility: visible;}
		.wrap:hover>img {z-index: 0; visibility: visible;}
		.wrap:hover > img.allbrandsBTN {z-index: 0;}
		.wrap:hover > img.background {visibility: visible;}
		
		/* Line Brake (Sublists) */
		.wrap .sublist {text-decoration: none; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 20px;
		          display:none; position: absolute; top: 0.8em; left: 3.8em; z-index: 600; font-weight: lighter; color: #222;}
		.wrap .sublist a {color: #06C; position: absolute; top: 3em; font-weight: bold; font-size: 13px;}
		.fs1:hover .wrap {visibility: visible;}
		
    .backbox { 
		padding: 0;
    	margin: 0;
    	position: absolute;
    	top: 0px;
    	left: 0px;
		width: 0px;
        width: 787px;   
        height: 34px;
        float:left;
		background-color: #111;
	}
	img.background {width:787px; height:418px; padding: 0; margin: 0; position: absolute; top: 34px; left: 0px; box-shadow: 2px 2px 5px #888;
	 background: url(http://www.mediafire.com/convkey/776f/fdgp9qoddeq0ykmfg.jpg?size_id=5) 0 0;}
	
	img.allcategoriesBTN {width:140px; height:34px; padding: 0; margin: 0; position: absolute; top: 0px; left: 0px;
	    background: url(http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2) 0 0;}

JavaScript

$(".list .fs1").bind({
    mouseenter:function(){
        $(".sublist").show();
    },
    mouseleave: function(){
        $(".sublist").hide();
    }
});