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.