Question

默认情况下，我有一个隐藏在视图中的<ul>，当鼠标悬停在父<li>上时会显示。当它进入视图时，父<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;
}

我在这里设置了一个小提琴：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 {
}

获取显示：table-cell和position：绝对可以很好地播放

1 个答案: