旋转菜单将移动其他菜单

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>之后来实现此效果。小提琴

• 给你的li一个固定的宽度 - 比如53px。小提琴

• 使用outline而不是border (我认为没有跨浏览器的方式来给出轮廓圆角(