Zona interactiva de botón fuera del mismo botón

[Luisa29]

Hola amigos, he hecho una botonera y le he añadido un fondo a los botones. Pues resulta que la zona interactiva del botón se sale de la zona del mismo botón, es un efecto bastante molesto, antes del tocar el botón al acercarte sale la manita y no me gusta así, a ver si me podéis echar una mano. He probado a tocar el código y sigue igual, no sé donde puede estar el fallo.

Aquí os dejo el html, el css y un ejemplo que he subido a una web para que lo veáis en acción:

Código:

<div class="botonera-blogsuperior"><ul class="menu-blogsuperior">
  <li><a href="/blog/indice">INDICE</a></li>
  <li><a href="/blog/category/2/">DINO</a></li>
 <li><a href="/blog/category/1/">LEONES</a></li>
    
  
</ul>
</div>

Código:

.texto-botones-blogsuperior {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: 10px;
	color: #FFF;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 10px;
}

.menu-blogsuperior,
.menu-blogsuperior ul,
.menu-blogsuperior li,
.menu-blogsuperior a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;

}
 
.menu-blogsuperior {
    height: 31px;
    width: 900px;

}
 
.menu-blogsuperior li {
    position: relative;
    list-style: none;
    float: right;
    display: block;
    height: 21px;

}

.menu-blogsuperior li a {
    display: block;
    padding: 0 0px;
	padding-right: 15px;
    margin: 25px -59px;
	margin-right: 12px;
    line-height: 22px;
    text-decoration: none;
	background-image: url(http://s29.postimg.org/fej6jangj/boton_fondo_probar.png);
	 background-repeat:no-repeat;
  background-position:center;
  

  background-position:46px -1px;
  background-size:69px 24px;

   width:105px;

 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
 
    color: #000000;
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
	text-align: right;
	text-align: right;
	text-align: right;
	text-align: right;
}
 
.menu-blogsuperior li:first-child a { border-left: none; }
.menu-blogsuperior li:last-child a{ border-right: none; }
 
.menu-blogsuperior li:hover > a {
	color: #FF6C6C;
}

.menu-blogsuperior ul {
    position: absolute;
    top: -109px;
    left: 0;
 
    opacity: 0;
    background: #1f2024;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .10s ease .1s;
    -moz-transition: opacity .10s ease .1s;
    -o-transition: opacity .10s ease .1s;
    -ms-transition: opacity .10s ease .1s;
    transition: opacity .10s ease .1s;
}
 
.menu-blogsuperior li:hover > ul { opacity: 1; }
 
.menu-blogsuperior ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
 

}
 
.menu-blogsuperior li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu-blogsuperior ul li a {
    width: 36px;
    padding: 10px 0 1px 10px;
    margin: 0;
 
    border: none;
    border-bottom: 0px solid #353539;
}
 
.menu ul-blogsuperior li:last-child a { border: none; }

Aquí el ejemplo:

http://jsfiddle.net/#&togetherjs=vSgITe2BmT

Muchas gracias amigos !!