如何对齐菜单项

Question

I am just working on an eCommerce site where I am trying to create a mega menu using CSS MEGA SITE NAVIGATION from Codyhouse .

Everything is perfect except the horizontal alignment of the 2nd level menu.

I tried positioning list but there is no use. Can anyone guide me to solve this?

Answer 1

In this situation, the issue is that float: left; will continue to try and float as it moves down the page, taking the easiest option first (there's room at column 6, that's why it's chosen that one).

So, in addition to floating I would instruct the 8th column to clear each of the first 7 items, no matter their height.

I can't see what your HTML structure is but something like this should do the trick. Replace li whatever child element you're using.

li:nth-child(7n + 8){
  clear: both;
}

To explain: 7n is the number of columns you want to have before starting a new row, and 8 is targeting the next column as you want this one to clear all of the first row's children.