创建水平导航菜单的问题（诺基亚式）

Question

我正在尝试制作类似诺基亚的水平菜单（如here），但没有成功。 正如你在JSFiddle上看到的那样，我无法获得活动菜单项的白色背景，以获取顶部蓝色菜单 - 容器的全高减1 px。我怎么能实现这一目标？非常感谢

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

Answer 1

也许这就是你要找的东西： 将其添加到#menu ul：

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

这是#menu ul li：

#menu ul li {
   height:100%;
}

JSfiddle