Не знаю, как исправить li item widths

Question

Я довольно новичок в css и html, и я пытаюсь создать раскрывающееся меню с тремя или четырьмя столбцами ссылок на каждую снизу. Я хочу, чтобы столбцы были встроены друг в друга. Мне удалось это сделать, но ссылки в каждом столбце состоят из двух или более строк, и я бы хотел, чтобы они отображались на одном.

Я уже возился с css, но не могу понять, как заставить их отображаться по одной строке на ссылку.

В моей codpen, вы увидите, что я работаю с: http://codepen.io/anon/pen/vLQGqM

Лучшее, что я мог сделать, это

.tlgnav .tlgnav-column { 
 
\t 
 
\t width: 100%; 
 
    }

, но это делает столбцы стекаются друг на друга, и это не то, что я хочу.

Я думаю, что это может иметь какое-то отношение к моему .tlgnav li, установленному на ширине 16,66%, но если я его изменю, мое меню не заполняет ширину экрана.

Может ли кто-нибудь сказать мне, что я делаю неправильно?

Answer 1

Вы можете использовать white-space : nowrap, чтобы избежать разрыва строки, но, возможно, это лучший способ сделать это. Я отвечаю на это решение, но если кто-то получает что-то лучше, следуйте ему.

http://codepen.io/anon/pen/BjGzgZ

.tlgnav h3 + ul li { 
    white-space:nowrap; 
}