Хоув меню будет перемещать другое меню

Question

#menu-main-menu li a{padding: 13px 15px 2px 15px; 
font-size: 15px; 
line-height: 30px; 
} 

#menu-main-menu li a:hover{ 

background: white; 
-webkit-border-top-left-radius: 10px; 
-webkit-border-top-right-radius: 10px; 
-moz-border-radius-topleft: 10px; 
-moz-border-radius-topright: 10px; 
border: 1px solid #cdcdcd; 
border-bottom:none; 
border-top-left-radius: 10px; 
border-top-right-radius: 10px;} 

это мой код моего сайта [http://96.30.0.16/~loansdir/] Пожалуйста, помогите мне в моей проблеме, если я буду поволок меню, некоторое меню будет двигаться, можете ли вы помочь мне с этим? спасибо ....

Answer 1

Это, вероятно, потому, что вы добавляете границы на зависании. Вы должны добавить эквивалентное количество места в нормальном состоянии, или вы увидите небольшой дрожание. Если я правильно читаю ваш CSS, это означает, что вам нужно добавить 1px дополнительное пространство на верхнем, левом и правом краях. Как насчет:

#menu-main-menu li a { 
    border: 1px solid transparent; 
    border-bottom: none; 
    ... 
} 
#menu-main-menu li a:hover { 
    border-color: #CDCDCD; 
    ... 
} 

Это должно создать прозрачную границу на верхней/влево/вправо, удалите нижнюю границу для всех государств, и просто изменить цвет границы на парении.

Answer 2

Граница на зависании приводит к тому, что li вырастет - таким образом, нажав li после него налево.

Чтобы обойти эту проблему вы можете:

• Вместо применения границы на самом <a> элемент - вы можете использовать абсолютно позиционированный псевдо-элемент: после того, как <a> для того чтобы достигнуть этого эффекта. FIDDLE

• Дайте вашей лике фиксированную ширину - скажем, 53px. FIDDLE

• Использование outline вместо border (я не думаю, что это кросс-браузерный способ придать очертания закругленные углы)