具有大线高度的列表项打破具有边框底部的锚点

Question

我很难解释我的问题所以我创建了一个图像： Imgur

这是我正在尝试重新创建效果并努力工作的代码笔： Codepen

.nav > li {
    height: 90px;
    line-height: 90px;
}

.nav > li a {
    display: block;
    border-bottom: 3px solid black;
}

我知道它可以像这样工作，因为它在这里工作，当悬停导航链接时：hubfootwear（dot）com（对不起这种格式，不能发布超过2个链接）

我已经尝试了很多分钟的元素检查器，但我无法弄清楚它为什么在该网页上工作，而不是在我的代码集上。