使用CSS将鼠标悬停在底栏上

Question

所以我有这个菜单栏。它是一个无序列表，菜单栏与页面内容分开，带有细长的下划线。现在我希望当有人鼠标悬停，链接时，列应该有一个粗的下划线（不是文本）。

我的css看起来像这样：

.main-navbar
{
    background-color:#fff;
    border-bottom:1px solid #f2f2f2;    
}

.main-navbar-item li a:hover
{

    border-bottom: 5px solid #dddddd;
}

这个工作正常，我可以看到鼠标悬停时出现厚底边框。但是，main-navbar行会向下移动以适应鼠标悬停时的额外5个像素，并在鼠标移出时重新启动。如何确保鼠标悬停在底栏上不会打扰主导航栏下划线？

一如既往，感谢任何帮助！

Answer 1

我最好的意见是从底部填充减少5px

例如 - 见下面的CSS：

CSS:
.main-navbar-item li a{
padding:15px  10px;
}
.main-navbar-item li a:hover 
{
padding:15px 10px 10px 10px ;
 border-bottom: 5px solid #dddddd;
}