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

悬停上的边框正在使李增长 - 从而将李的推向左侧。

要解决这个问题，你可以：

您可以使用绝对定位的伪元素代替在<a>元素上应用边框：在<a>之后实现此效果。的 FIDDLE

给你的李宽固定宽度 - 比如53px。的 FIDDLE

~~使用outline代替border~~ （我不认为有一种跨浏览器的方式来给出轮廓圆角）

菜单将移动其他菜单

2 个答案: