Вертикальное меню на css + выпадающий список

Хотел сделать вертикальное меню. При чем хотелось именно на css, а не на яве или флеш. Привожу рабочий вариант + бонус: выпадающий список в этом же меню.
Тем, кому не нужен выпадающий список, может использовать только первые два блока. Ну обо всем по порядку.
Вначале нужно знать, что мы хотим. Мне нужно было меню, где буквы одна под одной, то  есть вертикальное меню. Я перепробовал 8-9 вариантов и самым лучшим оказалось использовании white-space: pre;

Вот код css:

 

Для красивого горизонтального меню на несколько позиций достаточно первых двух блоков. Остальное уже для выпадающего меню.
И собственно html-код для примера:

 

Собственно и все. Пример можно глянуть в jsfidle — _http://jsfiddle.net/prolisk/eoydxdun/1/
Вот картинка того, что получается:

Вертикальное меню и выпадающий список на css
Вертикальное меню и выпадающий список на css

0 Comments

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *