If you are splitting your UL into a column format li in a similar way to the below:-
ul { width: 625px; max-width: 840px; min-height: 280px; list-style: none outside none; } li { float: left; position: relative; display: inline-block; width: 40%; padding: 0px; margin: 0px; }
… what you might find is that if the li on either side is higher than the other that the corresponding li is overlapped or thrown out of place like so:-
The highlighted 3rd item should be starting a new line, but is being pushed to the right as the first li has a height taller than the second throwing the nested lis out of position. To unify the columns and force the li to a new line in the respective column we simply need to add the following CSS:-
li:nth-child(2n+1) {clear: both;}
(when adding to the li) or alternatively to its parent UL we can use:-
ul > li:nth-child(2n+1) { clear: both; }
NB If you have more than 2 columns simply amend the (‘your column number’n+1) value.
… and then you get:-
Note that the li is pushed to a new line.
We have found this technique extremely useful when adjusting menu items in the Uber Menu plugin from Codecanyon.