Centering SubMenu

Attempt to center a sub menu with its parent menu item. using shrink to fit with absolute positioning to remove added element from the markup

by fezec

HTML

<div id="parent">
    <div id="child">Products
        <!--<div id="innerchild">-->
        <div id="menu"></div>
        <!--</div>-->
    </div>
</div>

CSS

:root, html, body {
    height:100%;
}
#parent {
    overflow:hidden;
    left:0;
    right:0;
    top:0;
    bottom:0;
    padding:0;
    border:0;
    margin:0;
    width:500px;
    height:100%;
    background:blue;
    position:relative;
}

#child {
    position:absolute;
    padding:0;
    border:0;
    margin:0;
    width:auto;  //shrink to fit;
    height:50%;
    background:red;
    bottom:0;
    top:50%;
    right:auto;
    left:50%;
}
#innerchild {
    position:relative;
    float:left;
    background:purple;
    padding:0;
    border:0;
    margin:0;
    top:0;
    left:0;
}

#menu{
    position:relative;
    width:400px;
    height:50px;
    background:teal;
    left:-50%;
}