Menu Sauter sur Hover

Question

J'ai une application Web (ASP.NET 2.0 C#). Sur ma Masterpage, j'ai un contrôle de menu, et j'utilise une feuille de style css pour styliser les différentes parties du menu. Pour une raison quelconque, lorsque je survole le menu, il saute un peu. Je pense que d'une manière ou d'une autre les frontières deviennent plus grandes quand je plane dessus.

Heres le style pour le menu entier:

.menu 
{ 
    width:110%; 
    height:25px; 
    border: 1px solid gray; 
    text-align:center; 
} 

Heres mon style pour le StaticHoverStyle:

.staticMenuHover 
{ 
    background-color:#CCCCCC; 
    border-style:solid; 
    border-color:#888888; 
    text-decoration: underline; 
    border-width:thin; 
} 

Je ne sais pas pourquoi cela se passe, quelqu'un peut-il aider?

Merci

Answer 1

Vous pouvez toujours ajouter un soulignement au lien (pas text-decoration) et ajuster le rembourrage. Exemple de travail:

#menu ul li a { 
    display: block; 
    width: 95%; 
    padding: 0px 2px 2px 4px; 
    text-decoration: none; 
    color: rgb(30%,30%,60%); background: transparent; 
} 
#menu ul li a:visited { 
    color: rgb(50%,10%,100%); 
} 
#menu ul li a:hover { 
    color: #000; 
    border-bottom: 2px solid #c63; 
    background: #fcf; 
    padding-bottom: 0px; } 

Ce qui rend ce travail est en train de changer le rembourrage inférieur 2px à 0 px et en ajoutant un fond de frontière 2px dans la même règle. Le changement de couleur est étranger à la question en question.

Answer 2

Il se passe parce que vous votre texte. Texte souligné Essayez sans la décoration de texte, et je parie que cela va résoudre votre problème.

Answer 3

La largeur de la bordure de votre classe de survol est réglée sur "thin", ce qui correspond à une bordure de 2 pixels dans mon test. Réglez-le sur 1px.

border-width:1px; 

Vous pouvez également effondrer cette seconde règle à la frontière de la classe à une seule ligne pour le rendre compatible avec votre première classe comme ceci:

border:1px solid #888888;