创建水平导航菜单的问题（类似诺基亚）答案

【问题标题】：Issue to create a horizontal navigation menu (nokia-like)创建水平导航菜单的问题（类似诺基亚）
【发布时间】：2013-12-15 16:45:54
【问题描述】：

我正在尝试制作类似诺基亚的水平菜单（如here）但没有成功。正如您在我的JSFiddle 上看到的那样，我无法让活动菜单项的白色背景在顶部将蓝色菜单容器的全部高度减去 1 像素。我怎么能做到这一点？非常感谢

HTML：

<div id="menu-container">
    <div id="menu">
        <ul>
            <li>Category 1</li>
            <li class="active">Category 2</li>
            <li> <a title="" href="">Category 3</a> 
            </li>
            <li>Category 4</li>
            <li>Category 5</li>
        </ul>
    </div>
    <!-- End DIV Menu -->
</div>

CSS：

#menu-container {
    display: table;
    width: 100%;
    background: #124191;
    height: 50px;
    padding-left: 20px;
    color: #fff;
}
#menu {
    vertical-align: middle;
    display: table-cell;
}
#menu ul {
    float: left;
    list-style: none;
}
#menu ul li {
    display: inline-block;
    width: 130px;
    line-height: 18px;
    text-align: center;
    color: #124191;
    font-weight: 400;
    font-size: 12px;
    background: #fff;
}
#menu ul li a {
    text-decoration: none;
    font-weight: 400;
    font-size: 12px;
    /* This is the sub-menu items */
    display: block;
}
#menu ul li a:active {
    background: fff;
}

【问题讨论】：

标签： html css menu navigation

【解决方案1】：

也许这就是您要寻找的：将此添加到#menu ul：

#menu ul {
   height:49px; 
   margin:0;
}

这个给#menu ul li:

#menu ul li {
   height:100%;
}

JSfiddle

【讨论】：

谢谢。差不多，但这个解决方案的问题是菜单项（类别 1、类别 2 等）不幸不再垂直对齐到蓝色菜单容器的中间
@Greg 很高兴我能帮上忙。如果您想知道是什么让菜单项垂直对齐到中间，那就是以下代码：line-height:49px; height:49px; 它们具有相同的数值就可以了！ :)
谢谢。如果您不介意，还有一件事，您知道为什么 a:active 不起作用吗？（我将 class="active" 用于项目“Category 3”，请参阅此 jsfiddle jsfiddle.net/DeK98 谢谢
@Greg 如果我理解正确，您是否希望该特定菜单项在特定页面上默认具有该样式？在这种情况下，将类更改为在a 标签上怎么样？像这样：<li > <a title="" class="active" href="">Category 3</a>
@Greg 并将 css 选择器更改为：#menu ul li a.active。