css - 如何使菜单文本与继承的高度垂直对齐

Question

我有一个非常标准的 Bootstrap 导航菜单，带有一些自定义修改。我在导航方面遇到的一个问题是 a:hover 选择器和 vertical-align 属性。我需要让 a:hover 选择器填充菜单栏高度的 100%，但是一旦我开始工作，我的垂直对齐效果就停止工作(反之亦然)。我怎样才能同时满足这两个要求？

(为清楚起见，请参阅我在 CSS 代码中的注释)

谢谢。

这是我的 fiddle ——代码也在下面......

http://jsfiddle.net/n2fole00/42d30eoh/

HTML

<div class="container">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="row">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#secondary-menu-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="secondary-menu-collapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">ONE</a></li>
                    <li class=""><a href="#">TWO TWO</a></li>
                    <li class=""><a href="#">THREE THREE THREE</a></li>
                    <li class=""><a href="#">FOUR FOUR FOUR FOUR</a></li>
                    <li class=""><a href="#">FIVE FIVE FIVE FIVE FIVE</a></li>
                </ul>
            </div>
        </div>
    </nav>

CSS

#secondary-menu-collapse .navbar-nav {
    display: table; 
    width: 100%;
    height: 100%;
}

#secondary-menu-collapse .navbar-nav li {
    width: 20%;
    display:table-cell;
    vertical-align: middle;
    text-align: left;
    float:none;
    height:inherit;
}

#secondary-menu-collapse .navbar-nav li a {
    height:inherit; /* Removing this gives the correct vertical alignment, but the background hover doesn't fill the height of the menu bar. */
}

#secondary-menu-collapse .navbar-nav li a:hover {
    background-color:green;
}

Answer 1

它必须成为a选择器吗？

如果你只是将 :hover 放在 li 元素上，像这样:

#secondary-menu-collapse .navbar-nav li:hover {
    background-color:green;
}

然后整个列表项(而不只是 anchor 标记中的文本)的背景颜色将变为绿色。然后您可以从 anchor 标记中删除 height:inherit; 属性。

这将使所有悬停元素的背景变为绿色。如果您希望事件元素保持黑色，您还可以添加:

#secondary-menu-collapse .navbar-nav .active {
    background-color: #080808 !important; /* The !important makes sure this has priority */
}

Updated JSFiddle

或者，如果您不想使用 !important 或者当您将鼠标悬停在事件元素上时想要不同的颜色，您可以改用它:

#secondary-menu-collapse .navbar-nav .active:hover {
    background-color: #BBBBBB; /* Set a hover color for the active item here */
}