Search code examples
csscenteringsubmenualignment

Centering horizontal submenu below parent with css

Best shown with a Fiddle: http://jsfiddle.net/Jnttm/

How can I get the sub-menu to center underneath the parent menu-item? A lot of the centering tricks I've found don't apply because the child element is wider than the parent.

Is this possible with pure CSS or do I have to resort to javascript?
If JS is required does anyone have JQuery code handy for doing this?

Solution

  • May be you have to define a default width to your submenu like this :

    .sub-menu {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    white-space: nowrap;
    text-align:center;
    left:50%;
    margin-left:-150px;
    width:300px;
}
.active .sub-menu {
    display:block;
}

    Check this http://jsfiddle.net/sandeep/Jnttm/1/