CSS / HTML中导航栏中的下划线链接

我有下划线部分.我只是想让下划线远离文本.此外,当我悬停时,这是我想要的.

例如：

家

这样的事情.

我的代码到目前为止：

#menu a：悬停{
    颜色：#FFF;
    background-color：#252525;
    文字装饰：下划线;
}

如果需要更多信息,请告诉我.

使用border-bottom而不是下划线,这样你就可以使用填充来操纵链接和下划线之间的空间,如下所示：

HTML：

<div id="menu">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

CSS：

#menu a {
    color: #FFF;
    background-color: #252525;
    text-decoration: none;
    border-bottom: transparent solid 1px;
    padding-bottom: 5px;
}
#menu a:hover {
    color: #FFF;
    background-color: #252525;
    border-bottom: red solid 1px;
}

这是上面代码的jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/39/