Center ul in li element

[TAiS46]

Hey Folks,

http://jsfiddle.net/54agho8o/

i am searching for a way to center the ul in “test1” hover.
I tried “inline-block” and “margin: 0 auto;” but doesn’t work.

Did someone has an idea?

Thanks.

[Paulie_D]

You have an odd structure there…are you trying to do some kind of mega menu?

[TAiS46]

yes I try, just take a look at http://fruitoy.de there you can see the current navigation.

[Paulie_D]

OK…I think I figured it out.

I’ve commented out a few lines so we can see what’s actually happening.

You have to position the ul at 50% left and the translate it back 50% of it’s own width

    top: 100%; /* it'll always adjust regardless of parent height */ 
    left:50%;
    transform:translateX(-50%);

http://jsfiddle.net/54agho8o/1/

[TAiS46]

Thanks for your idea, but not the best way.
The ul should center unter the li.

Here you can see that this is not the best solution. It centers on the whole page, not only under the li.

http://jsfiddle.net/54agho8o/2/

[Paulie_D]

The ul should center unter the li.

Frankly it’s really not clear to me what you are trying to do. You have an odd structure which doesn’t seem to conform to any example you have provided.

Do you have an image of your proposed design…not an example link to something that’s not quite right or what you are trying to achieve?

[Author]

Posts