Html 带边框底部的文字装饰，ul垂直中心-li'；s"；“跳跃”；在上面悬停时

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

我有一些nav包含ul，里面有一些li项目。那么我的问题是，如何在这个li下面加上边框？还有一个条件是导航具有静态高度，我希望ul位于中心（水平和垂直）

这是我现在拥有的

HTML:

我试了很多，但还是没有结果。以下是我尝试过的：

：after-在li之后做一些div，但是我不能得到每个div的宽度 李,

将悬停时的边距顶部添加到所有其他li：not（如#main>li:hover（：not）-这是构造工作，但不适用于这种情况）

在悬停时向ul#main添加边距顶部（ul#main取导航的整个高度） 主要的问题是：当我在上面悬停时，李会跳起来

也许你知道ul垂直对齐的另一种方法，或者在ul中添加边距顶部，但我尝试了我所知道的每一种方法。

为了防止“跳跃”，在边框未使用时添加一个3px底部衬垫来补偿您的3px边框（不悬停），并在边框使用时删除衬垫（悬停）

更新的Fiddle:

为防止“跳跃”，请在边框未使用（非悬停）时添加一个3px底部衬垫，以补偿您的3px边框，并在边框使用（悬停）时移除衬垫

更新的Fiddle:

为防止“跳跃”，请在边框未使用（非悬停）时添加一个3px底部衬垫，以补偿您的3px边框，并在边框使用（悬停）时移除衬垫

更新的Fiddle:

为防止“跳跃”，请在边框未使用（非悬停）时添加一个3px底部衬垫，以补偿您的3px边框，并在边框使用（悬停）时移除衬垫

更新的小提琴：

<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>

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;
}

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


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