html - 带有边框底部的文本装饰，ul 垂直居中 - li 悬停在其上时为 "jumps"

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，但我无法获得每个的宽度 李;
2. 悬停时添加 margin-top，到所有其他带有 :not 的 li(比如 #main > li:hover(:not) - 这是建筑工作，但不适用于这种情况)；
3. 悬停时添加 margin-top 到 ul#main(ul#main 占据导航的整个高度)；

主要问题是:当我将鼠标悬停在 li 上时，它会跳起来。

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

Answer 1

为防止“跳跃”，在不使用边框(不是悬停)时通过添加 3px 底垫来补偿 3px 边框，并在使用边框(悬停)时移除填充。

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


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

更新的 fiddle : http://jsfiddle.net/seadonk/kppzqqo3/