CSS menu formatting issue

Here's my take on this navigation menu: http://jsfiddle.net/bG46Z/. I've sprinkled some comments in the CSS code that address the vertical line in between the links and the horizontal centering of the submenu.

For this preview, use Firefox. WebKit browsers will also work, but I've experienced an anomaly (perhaps a bug) when changing the viewport size. That is, when screen width is small (below 600px) and you resize it so that the full menu is shown and then you resize it back to smaller width, then hovering of the menu "button" will not display the menu. It works swell in Firefox, so I am thinking that it is just a bug in WebKit browsers. To overcome the latter anomaly, you can just sprinkle some jQuery code.

HTML:

<div id = "menuContainer">
    <p>Menu</p>
    <ul>
        <li><a href = "#">Home</a></li>
        <li><a href = "#">Menu Two</a>
            <ul>
                <li><a href = "#">Sub Menu One</a></li>
                <li><a href = "#">Sub Menu Two</a></li>
                <li><a href = "#">Sub Menu Three</a></li>
                <li><a href = "#">Sub Menu Four</a></li>
            </ul>
        </li>
        <li><a href = "#">Menu Three</a></li>
        <li><a href = "#">Menu Four</a></li>
    </ul>
</div>
<p>Sample paragraph</p>

CSS:

/* 
    a mini-reset to eliminate default formatting 
    applied by the browser
*/

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

body {
    padding: 10px;
}

#menuContainer > p {
    display: none;
}

/*
    the main ul is displayed as a table.  This makes
    it shrinkwrap around its children while remaining 
    a block element.  This allows to apply margin: 0 auto 
    to center it.  Additionally, no clearfix is required 
    if elements are floated in the table element.
*/

#menuContainer > ul {
    display: table;
    margin: 0 auto;
}

#menuContainer > ul > li {
    float: left;
    padding: 5px 0;
    position: relative;
}

#menuContainer > ul > li:hover > a {
    color: #aaa;
}

/*
    The links are displayed as blocks, which allows 
    changing their width and height indirectly through 
    paddings, line-heights, etc.
*/

#menuContainer li a {
    display: block;
    font: bold 15px/1 Sans-Serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #002B81;
    text-align: center;
    padding: 0 20px;
    white-space: nowrap;
}

/*
    The border is added on the left for the links that are 
    children of the list item that follows another list 
    item.  In other words, the border is set for every 
    link that is a child of every list item, except the 
    first list item.
*/

#menuContainer > ul > li + li > a {
    border-left: 2px solid #002B81;
}

/*
    This chunk of code does the horizontal centering of the 
    nested list under its list item parent.  The left of 50% 
    moves the left edge of the list to the center of its li 
    parent; and, translateX() of -50% moves the nested list 
    to the left by 50% of its width.
*/

#menuContainer ul ul {
    position: absolute;
    left: 50%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 20px 0 30px 0;
    display: none;
}

/*
    This is a "trick" to apply the background to 
    only a part of the nested ul.  In reality the 
    ul is immediately below its li parent, but this 
    makes it look as if it is farther down.
*/

#menuContainer ul ul:before {
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    z-index: -1;
}

#menuContainer ul ul > li:first-child {
    border-top: 2px solid #002B81;
    padding-top: 10px;
}

#menuContainer ul ul a {
    padding: 0 10px;
    color: #fafafa;
    line-height: 2;
}

#menuContainer ul ul a:hover {
    color: #ccc;
    background-color: #fafafa
}

#menuContainer > ul > li:hover > ul {
    display: block;
}

/*
    media queries code that makes the menu "button" 
    visible, reformats the menus for more narrow display,
    and creates the appropriate dropdown effect.
*/

@media screen and (max-width: 600px) {
    #menuContainer > p {
        cursor: pointer;
        display: table;
        margin: 0 auto;
        padding: 5px 10px;
        font: bold 15px/1 Sans-Serif;
        text-transform: uppercase;
        color: #fafafa;
        background-color: #002B81;
    }

    #menuContainer > ul {
        padding: 10px 0 30px 0;
        position: absolute;
        display: none;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #menuContainer > ul:before {
        content: "";
        position: absolute;
        top: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        z-index: -1;
    }

    #menuContainer > ul > li {
        float: none;
    }

    #menuContainer > ul > li:first-child {
        border-top: 2px solid #002b81;
    }

    #menuContainer > ul > li {
        padding: 5px 0;
    }

    #menuContainer > ul > li > a {
        font-size: 14px;
    }

    #menuContainer > ul > li:hover > a {
        color: #585858;
    }

    #menuContainer > ul > li + li > a {
        border: 0;
    }

    #menuContainer ul ul {
        position: static;
        display: block;
        border-top: 0;
        padding: 0;
        -webkit-transform: none;
        transform: none;
        margin-top: 5px;
    }

    #menuContainer ul ul > li:first-child {
        border: 0;
        padding-top: 0;
    }

    #menuContainer ul ul a {
        font-size: 12px;
    }

    #menuContainer:hover > p:hover + ul,
    #menuContainer:hover ul:hover {
        display: block;
    }
}

Cheers.