poniendo li en la siguiente columna después de la altura específica

Estoy trabajando en los menús de navegación en un sitio web de wordpress. Por favor, eche un vistazo a la imagen de fondo y alinéela con la parte superior para css y html.

Esta publicación fue exitosa, pero ahora quiero llevar los elementos de la lista (li) de ul a una nueva columna después de que scope una altura determinada. Explicando más, estoy teniendo una imagen de fondo de altura fija para los submenús. Cuando el submenú alcanza una altura de fondo, debe ser empujado a la siguiente columna.

De esta manera los submenús estarán siempre dentro de la imagen de fondo.

Gracias

Podrías intentarlo en css agregando un conteo específico. Básicamente, usted dice que hay una cierta cantidad de elementos y, si se supera esa cantidad, la empujará a la siguiente columna.

ul { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }​ 

Sin embargo, debo advertirte que los navegadores no son compatibles y desafiados universalmente, simplemente lo ignorarán. Tienes que idear algo más para eso.

Otra forma es probablemente establecer una cierta altura en su división general, como por ejemplo como este:

 ul { height: 100px; border: 1px solid #f00; } li { float: left; border: 1px solid #0f0; width: 50px; } 

Además, creo que solo es un lío con css y tratar de averiguar cuál es el método más práctico para ti.

Esto se puede hacer usando la cuenta de columnas de propiedades css como,

  column-count:2; 

Propiedad sobre li o div y cierta altura,

El siguiente enlace te explicará más

Cómo hacer que la lista DIV flotante aparezca en columnas, no en filas

Creo que la forma más fácil es establecer inline-block en inline-block para sus elementos li .

Siempre que su ancho / alto se defina como no 100%, debería funcionar.