-1 
#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/] 请帮我解决我的问题，如果我要放置菜单，一些菜单会移动你能帮我解决这个问题吗？谢谢你....

4

2 回答 2

2

这可能是因为您在悬停时添加了边框。您必须在正常状态下添加等量的空间，否则您会看到一点抖动。如果我正确阅读了您的 CSS，这意味着您需要在顶部、左侧和右侧边缘添加 1 像素的额外空间。怎么样：

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

这应该在顶部/左侧/右侧设置透明边框，删除所有状态的底部边框，并在悬停时更改边框颜色。

于 2013-07-18T23:38:32.583 回答
1

悬停的边框导致 li 增长 - 从而将 li 推向左侧。

为了解决这个问题，您可以：

  • 而不是在元素本身上应用边框<a>- 您可以使用绝对定位的伪元素 :after<a>来实现此效果。小提琴

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

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

于 2013-07-18T23:38:54.843 回答