javascript - 令人困惑的悬浮效果

Question

我已经创建了这个导航栏：http ://cdpn.io/tdnfv （在两个教程的帮助下，由于我的声誉低，我不能在这里发布链接，链接在 codepen 上）

现在如您所见，蓝色条移动良好，完全位于第 6 项之下，但对第 6 项的“不和谐”正在增加。我无法识别对此负责的代码！我也不确定如何更改移动条的“默认位置”，即没有悬停事件时的位置。

我真的很感激一些帮助，在此先感谢大家。

Answer 1

那将是每个<li>. 有不同的处理方法，但我最喜欢的是删除字体大小，然后在实际包含文本的元素中恢复它。

ul {
    font-size: 0;
}
ul li a {
    font-size: 18px;
}

PS，这是一个非常简洁的概念。