JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navholder">
    <div id="nav">
<a href="index.html"><div id="button1"><div id="triangle"></div><div id="buttonname">Home</div></div></a>

<a href="buying.html"><div id="button2"><div id="triangle"></div><div id="buttonname" class="buy">Buying</div></div></a>

<a href="renting.html"><div id="button3"><div id="triangle"></div><div id="buttonname" class="rent">Renting</div></div></a>

<a href="building.html"><div id="button4"><div id="triangle"></div><div id="buttonname">Building</div></div></a>

<a href="architecture.html"><div id="button5"><div id="triangle"></div><div id="buttonname">Architecture</div></div></a>

<a href="landbuying.html"><div id="button6"><div id="triangle"></div><div id="buttonname">Land Buying</div></div></a>

    </div>
</div>

CSS

#navholder {
    position:absolute;
    background:#FFFFFF;
    width:950px;
    height:350px;
    top:150px;
    margin:0 auto;
    left:0;
    right:0;
    border:solid 1px #999;
    background-image: url(http://placehold.it/950x350);
}
#nav {
    width:950px;
    position:absolute;
    bottom:-22px;
    text-align: center;
    display:inline-block;
}
#button1, #button2, #button3, #button4, #button5, #button6 {
    width:130px;
    height:35px;
    background-color:#879362;
    margin-left:2px;
    margin-right:2px;
    display:inline-block;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    line-height:35px;
    font-weight:bold;
    color:#fff;
}
#button1:hover > #triangle, #button2:hover > #triangle, #button3:hover > #triangle, #button4:hover > #triangle, #button5:hover > #triangle, #button6:hover > #triangle {
    display: block;
}
#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover, #button6:hover {
    background-color:#B7939B;
}
#triangle {
    position:relative;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #B7939B;
    top:-15px;
    left:0px;
    right:0;
    margin:0 auto;
    display: none;
}
#buttonname {
    width:130px;
    position:absolute;
    top:0px;
    margin:0 auto;
}

JavaScript

$(".buy").hover(function () {
    $("#navholder").css("background-image","url('http://upload.wikimedia.org/wikipedia/commons/0/06/Skybox_sky.png')");
});



$(".rent").hover(function () {
    $("#navholder").css("background-image","url('http://upload.wikimedia.org/wikipedia/commons/0/06/Skybox_sky.png')");
});