JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <nav>
        <ul class='main-nav'>
            <li>
                <a href='#' onmouseover='menuHover(this);' onmouseout='menuHoverOut(this);'>LINK</a>
                <img alt='' class='hover-img' src='https://dl.dropboxusercontent.com/u/32550463/menu-hover.png' />
            </li>
            <li>
                <a href='#' onmouseover='menuHover(this);' onmouseout='menuHoverOut(this);'>LINK</a>
                <img alt='' class='hover-img' src='https://dl.dropboxusercontent.com/u/32550463/menu-hover.png' />
            </li>
        </ul>
    </nav>
</header>

CSS

a, a:link {
	color: inherit;
	text-decoration: none;
}

body {
    background-color: #2a4b8b;
}

header nav {
	text-align: center;
	position: relative;
}

.main-nav {
	margin: 0 auto;
	padding-right: 25px;
	list-style: none;
	display: inline-block;
}

.main-nav li {
	float: left;
	margin-right: 23px;
	display: block;
	padding-top: 50px;
	-webkit-box-shadow: 0 4px 8px rgba(2,3,2,.39);
	-moz-box-shadow: 0 4px 8px rgba(2,3,2,.39);
	box-shadow: 0 4px 8px rgba(2,3,2,.39);
	position: relative;
}

.main-nav li img.hover-img {
    display: none;
}

.main-nav li:hover img.hover-img {
    display: inline;
}

.main-nav li a {
	display: block;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 3px;
	border-bottom: 5px solid #6173ad;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

.hover-img {
	display: none;
	position: absolute;
	left: 0px;
	width: 100%;
	height: auto;
}