使用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

Eg -参见下面的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;
}