Take the 2-minute tour ×

I'm trying to make a Nokia-like horizontal menu (like here) but without success. As you can see on my JSFiddle I can't get the white background of the active menu item to take the full height of the blue menu-container minus 1 px at the top. How could I achieve that? Many thanks

enter image description here


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


#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;
share|improve this question

1 Answer 1

up vote 1 down vote accepted

Perhaps this is what you're looking for: Add this to #menu ul:

#menu ul {

and this to #menu ul li:

#menu ul li {


share|improve this answer
Thanks. Almost, but the issue with this solution is that the menu items (Category 1, Category 2, etc) are no longer vertically aligned to the middle of the blue menu-container unfortunately –  Greg Dec 15 '13 at 17:06
@Greg see my updated fiddle. Does this work well? –  Daniel Lisik Dec 15 '13 at 17:14
Perfect, thanks! –  Greg Dec 15 '13 at 17:21
@Greg Glad I could help. If you're wondering what made the menu items vertically aligned to the middle it was this code: line-height:49px; height:49px; They having the same numeric value did the trick! :) –  Daniel Lisik Dec 15 '13 at 17:23
Thanks. One more thing if you don't mind, would you know why the a:active doesn't work? (I put class="active" for item "Category 3", see this jsfiddle jsfiddle.net/DeK98 Thanks –  Greg Dec 15 '13 at 17:30

Your Answer


