带有 border-bottom 的文本装饰，ul 垂直居中 - li 悬停在其上时“跳跃”

Question

我只是对 CSS 解决方案感兴趣。

我有一些导航包含 ul，里面有一些 li 项目。所以我的问题如何用 border-bottom 给这个 li 下划线？还有一个条件是 nav 具有静态高度，并且我希望 ul 将位于中心（水平和垂直）。

这就是我现在所拥有的。JSFiddle

HTML：

<nav>    
    <ul id="menu">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
</ul>
</nav>

和CSS：

nav {
    height: 120px;
    width: 90%;
    margin: 0 auto;
    display: table;
}

#menu {
    display: table-cell;
    vertical-align: middle;
    list-style-type: none;
    height: 20px;
    padding: 0;
}

#menu > li {
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    float: left;
    width: inherit;
    padding: 0 25px 0 25px;
    cursor: pointer;
}

#menu > li > a {
    color: #000;
    text-decoration: none;
}

#menu > li:hover {
    border-bottom: 3px solid #000;
}

#menu li a:hover {
    text-decoration: none;
}

我尝试了很多，但仍然没有结果。这是我尝试过的：

1. :after - 在 li 之后制作一些 div，但我无法获取每个 li 的宽度；
2. 在悬停时向所有其他 li 添加 margin-top ：not （如 #main > li:hover(:not) - 这是建设工作，但不适用于这种情况）；
3. 悬停时添加 margin-top 到 ul#main （ul#main 占据 nav 的整个高度）；

主要问题是：当我将鼠标悬停在其上时，li 会跳跃。

也许您知道 ul 垂直对齐或向 ul 添加 margin-top 的另一种方法，但我尝试了我所知道的每一种方法。

Answer 1

为了防止“跳跃”，请在不使用边框（不是悬停）时添加 3px 底垫来补偿 3px 边框，并在使用边框（悬停）时删除填充。

#menu > li {
    ...
    padding: 0 25px 3px 25px;
    ...}


#menu > li:hover {
    ...
    padding-bottom: 0px;
    ....}

更新的小提琴： http://jsfiddle.net/seadonk/kppzqqo3/