Centering on hover tooltip-style sub-nav isn't working

Question

As you can see here; http://bit.ly/sifpz9, when hovering over "whats new" or "accessories" in the primary nav, the tooltip-style sub-nav dropdown centers perfectly. However, when you hover over "clothing", it's not centered.

I've tried repositioning, however it just doesn't work for that nav "clothing" without ruining the other two.

Is there a better solution or a fix?

Thank you!

Answer 1

This is pretty easily achieved using the following CSS.

#top-menu ul ul {
    margin-left: -87.5px;
    left: 50%;
    }

We use a minus margin of 87.5px because your width of the ul is 175px thus giving us half the width of the ul, we then move it left 50% so that it is in the middle of you li's anchor tag.

I hope this makes sense. Any problems leave a comment and I will get back to you.

Answer 2

Actually, it's just a coincidence that the submenu is centered for "What's new" and "Accessories", but they actually looks centered. The problem is that you're doing it wrong, defining a left style position fixed to -31px for the inner submenus.

But since those submenus have fixed width, you can rely on it using an old trick:

#top-menu ul ul {
    left: 50%;
    margin-left: -88px;
}

This moves the submenus to the center of the <li> element, and then back to the left of half (more or less) of its size.