Hola chicos buenos días!
Tengo un pequeño problema con un menú que me está volviendo loca.
Es un menú horizontal normalito, pero al hacer hover sobre el texto, las palabras (que en si cambian a negrita) empujan el resto de palabras que están a su derecha.
HTML
<div id="menu">
<ul class="menu">
<li><a href="#anchor1inicio" class="anchorLink"> Sarrera</a></li>
<li><a href="#anchor2hotela" class="anchorLink"> Hotela</a></li>
<li><a href="#anchor3jatetxea" class="anchorLink"> Jatetxea</a></li>
<li><a href="#anchor4tarifak" class="anchorLink"> Tarifak</a></li>
<li><a href="#anchor5galeria" class="anchorLink"> Galeria</a></li>
<li><a href="#anchor6kokapena" class="anchorLink"> Kokapena</a></li>
<li><a href="#anchor6kontaktua" class="anchorLink"> Kontaktua </a></li>
</ul>
</div>
CSS
#menu{
margin-top:30px;
padding-top:20px;
float:right;
width:610px;
overflow:hidden;
font-family:DIN Alternate Medium,"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
}
.menu{
display:inline;
width:610px;
overflow:hidden;
}
.menu li{
float:left;
list-style: none;
}
.menu li a{
font-size:15px;
text-decoration:none;
text-transform:uppercase;
font-family:DIN Alternate light, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;;
color: #959a6f;
outline: none;
font-weight:normal;
}
.menu li a:hover{
font-family:DIN Alternate medium, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
color: #959a6f;
}
----
¿Alguna idea de qué puede estar pasando?