menu pronto editável com efeito hover

Abaixo está o código, se o menu ficar de maneira desproporcional, edite somente o código CSS !

Código:

<!-- menu hover pronto por belo sonho -->
<div class='menu-hover'>
  <li class='home'><a href='#home'>Home</a></li>
  <li class='sobre'><a href='#sobre'>Sobre</a></li>
  <li class='contato'><a href='#contato'>Contato</a></li>
  <li class='ajuda'><a href='#ajuda'>Ajuda</a></li>
  </div>
<style>
.menu-hover {
    background: url('http://i.imgur.com/xY5W6CF.png')no-repeat;
    height: 70px;
    width: 1081px;
    padding: 0px 60px 0;
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto;
}
.menu-hover li{
list-style:none;
display:inline;
    padding-right: 160px;
  }
.menu-hover li a{
color:transparent;
  }
/*
ESCRITOS
-------------------------------
 */
.menu-hover li a {
background: url('http://i.imgur.com/Yh1Q80T.png')no-repeat; /* background */
transition:all 0.8s;
  }
.menu-hover li a:hover {
background: url('http://i.imgur.com/WkTibds.png')no-repeat;  /* background ao passsar o mouse em cima */
  }
.menu-hover li.home a {
    height: 45px;
    width: 100px;
    position: absolute;
    background-position: -38px 0px;
}
.menu-hover li.sobre a {
    height: 45px;
    width: 107px;
    position: absolute;
    background-position: -188px 0px;
}
.menu-hover li.contato a {
    height: 45px;
    width: 147px;
    position: absolute;
    background-position: -343px 0px;
}
.menu-hover li.ajuda a {
    height: 45px;
    width: 187px;
    position: absolute;
    background-position: -528px 0px;
}
</style>
<!-- menu hover pronto por belo sonho -->