radius of action of button in css - html

Question

to see if anyone can tell me why my css button has a radius of action as big around, is there any way to reduce it?
When I put the mouse over the hand that goes in idle state goes far beyond the text of the button, I would like to reduce this area of action, but not as in css
Thank you.
CSS:
/*BOTONES SUPERIOR*/
#botonera-blogsuperior {
width: 900px;
height: 35px;
}
.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 (boton-fondo-probar.png);
background-repeat:no-repeat;
background-position:center;
height:27px;
width:105px;
background-position:46px -1px;
background-size:69px 24px;
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; }
HTML
<div class="botonera-blogsuperior"><ul class="menu-blogsuperior">
<li>INDICE</li>
<li>DINO</li>
<li>LEONES</li>
</ul>
</div>
EXAMPLE:
http://jsfiddle.net/#&togetherjs=vSgITe2BmT
Thanks !!

Answer 1

I just moved all definitions that give shape to the link from the a Tag to the li Tag and replaced the padding with margin.
Add this to your CSS:
.menu-blogsuperior li {
height:27px;
width:105px;
padding: 0 0px;
margin: 25px -59px;
margin-right: 27px;
background-image: url (boton-fondo-probar.png);
background-repeat:no-repeat;
background-position:center;
background-position:46px -1px;
background-size:69px 24px;
text-align: right;
text-align: right;
text-align: right;
text-align: right;
}
And adjust this definition in your CSS so it is exactly like mine:
.menu-blogsuperior li a {
text-decoration: none;
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;
}
Worked for me in the fiddle.