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

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

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

Вот код css:

 

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

 

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

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

0 Comments

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

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

пять + 18 =

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">