html - 获取显示 :table-cell and position:absolute to play nicely

Question

默认情况下我有一个 <ul>隐藏在 View 中，当鼠标悬停在父级上时变得可见 <li> .当它确实进入父 View 时 <li>将其宽度扩展 1px。出于某种原因，只有在列表项上使用 display:table-cell 时才会发生这种情况，考虑到垂直居中的能力，我更愿意继续使用它。但是 1px 的跳跃是不需要的。

<ul class="nav-menu">
    <li class="downloads"><a>Downloads</a>
        <ul class="downloads-menu">
            <li>Download 1</li>
            <li>Download 2</li>
            <li>Download 3</li>
        </ul>
    </li>
    <li class="about"><a>About</a></li>
    <li class="resources"><a>Resources</a></li>
    <li class="contact"><a>Contact</a></li>
</ul>

ul.nav-menu {
    position: relative;
    height: 50px;
    width: 100%;
    background: black;
    color: white;
}

ul.nav-menu > li {
    display: table;
    float: left;
    list-style: none;
    height: 50px;
    border-right: 1px solid #333;
    padding: 0 20px;
}

li a {
    display: table-cell;
    vertical-align: middle;
}

ul.nav-menu li.downloads:hover ul.downloads-menu {
    display: block;
}

ul.downloads-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    height: 250px;
    width: 200px;
    background: red;
}

我在这里设置了一个 fiddle :http://jsfiddle.net/azoc8c4m/1/

Answer 1

ul.nav-menu > li {
    float: left;
    list-style: none;
    height: 50px;
    line-height: 50px;
    border-right: 1px solid #333;
    padding: 0 20px;
}

li a {
}