Меню Прыжки на Hover

Question

У меня есть веб-приложение (ASP.NET 2.0 C#). На моей главной странице у меня есть элемент управления меню, и я использую таблицу стилей CSS для стилизации различных частей меню. По какой-то причине, когда я наводил курсор на меню, он немного подпрыгивает. Я думаю, что как-то границы становятся больше, когда я навис над ним.

Heres моделирование для всего меню:

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

Heres мой стиль для StaticHoverStyle:

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

Я не знаю, почему это происходит, кто-то может помочь?

Благодаря

Answer 1

Вы всегда можете добавить подчеркивание по ссылке (не text-decoration) и отрегулируйте отступы. Рабочий пример:

#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; } 

Что делает эту работа меняется 2px нижних отступов до 0 пикса и добавление 2px границ дна в же правилу. Изменение цвета постороннее к вопросу.

Answer 2

Это происходит потому, что вы подчеркивание текста. Попробуйте без текстового оформления, и я уверен, что это решит вашу проблему.

Answer 3

Ваша ширина границы вашего класса hover настроена на тонкий, который рендеринга является границей 2 пикселя в моем тесте. Установите его в 1px.

border-width:1px; 

Вы также можете свернуть границы правила этого второго класса на одной линию, чтобы сделать его совместимым с вашим первым классом, как это:

border:1px solid #888888;