nav ul {
    margin: 0px;
    padding: 6px 10px 0px 0px;
    z-index: +10;
    list-style: none;
}

nav li {
    float: right;
    margin-right: 0px;
    width: 83px;
    height: 49px;
}

nav li a, nav li a:visited {
    color:#343946;
    text-decoration: none;
    font-family: helvetica;
    font-size: 11px;
}

nav li a:hover {
    color:#30b59b;
    text-decoration: none;
    font-family: helvetica;
    font-size: 11px;
}
nav a.destinationpic, nav a.contactpic,
nav a.gallerypic, nav a.foodpic, nav a.homepic {
    display: block;
    width: 50px;
    height: 49px;
    text-decoration: none;
    padding-top: 52px;
}

nav a.destinationpic:hover, nav a.contactpic:hover,
nav a.gallerypic:hover, nav a.foodpic:hover, nav a.homepic:hover {
    background-position: -50px;
}

nav a.homepic {
    background: url("../images/home2.png") 0 0 no-repeat;
}

nav a.destinationpic {
    background: url("../images/des2.png") 0 0 no-repeat;
}

nav a.contactpic {
    background: url("../images/con2.png") 0 0 no-repeat;
}

nav a.gallerypic {
    background: url("../images/gall2.png") 0 0 no-repeat;
}

nav a.foodpic {
    background: url("../images/food2.png") 0 0 no-repeat;
}

<nav>
    <div class="headerloc">
        <img src="images/headerlog.png" width="251 px" height="68 px">
    </div>
    <div align="center">
        <ul>
            <li><a href="contact.html" class="contactpic">Contact</a>
            </li>
            <li><a href="#"><img src="images/gallactive.png">Gallery</a>
            </li>
            <li><a href="food.html" class="foodpic">Food</a>
            </li>
            <li><a href="destinations.html" class="destinationpic">
                    Destinations</a>
            </li>
            <li><a href="indeckz.html" class="homepic">Home</a>
            </li>
        </ul>
    </div>
</nav>