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 !!

[heinzy]

Hola

La verdad que habian muchas cosas que sobraban y eran todo un poco caotico,

he limpiado cosas que no hacian falta y te lo puesto de una manera para que no tuvieses el margen a la izquierda que era el problema.. ya que al pasar el raton la caja era mas grande que el enlace,

te doy un consejo, siempre ponle a todo un border: 1px solid black; y asi siempre sabras lo que te sobra en cualquier contenedor, te ayuda mucho para saber donde esta el problema.

te paso el css modificado:

Código CSS:

.menu-blogsuperior li {
    position: relative;
    list-style: none;
    float: right;
    display: block;
    height: 21px;
 
}
 
.menu-blogsuperior li a {
 
    display: block;
    padding-left: 3px;
    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;
     text-align: center;
 
  background-position:-5px -1px;
  background-size:75px 24px;
 
   width:65px;
 
 
    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;
 
    
}
 
 
 
 
.menu-blogsuperior li:hover > a {
    color: #FF6C6C;
}
 
 
 
.menu ul-blogsuperior li:last-child a { border: none; }
 

espero te sirva.. salu2