Question

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

（为清楚起见，请参阅我在CSS代码中的评论）

感谢。

这是我的小提琴 - 代码也在下面...

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

然后整个列表项（而不仅仅是内部的文本，在锚标记中）将使其背景颜色变为绿色。然后，您可以从锚标记中删除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 */
}

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

1 个答案: