HTML/CSS. Как создать вертикальное и горизонтальное меню

Эта инструкция продемонстрирует, как создать вертикальное и горизонтальное меню используя стили CSS. Перед началом убедитесь, что вы знакомы с HTML тэгами ненумерованного списка. Кроме того, посмотрите инструкцию как создать меню в HTML.

Для начала создадим HTML меню на основе ненумерованного списка:

Home
About
Services
Partners
Contacts

Теперь необходимо создать CSS файл и подключить его к странице:

Убедитесь, что код подключающий CSS находится в разделе вашего документа.

Вы можете использовать и inline стили.

В результате у вас должен получиться следующий код:

	





	
Home
	
About
	
Services
	
Partners
	
Contacts




Macau-gambling-platform-hr@londradabirturkkizi.com
Macau-gambling-platform-hr@londradabirturkkizi.com
中缆在线
富耐克
Gaming-platform-website-support@tvducul.com
Online-betting-website-contact@0797bs.com
Gambling-website-recommendations-customerservice@ydx133.com
华东政法大学教学管理信息系统
太阳城娱乐
网上赌博平台
合肥房地产新闻-

先看看
蚌埠招聘网
杭州地图_丁丁网
78挂靠网
汇通外汇论坛

外语教育网
南阳欣欣旅游网
上海欢乐谷官方网站
阳光三极
触摸精灵 

Несортированный список обладает собственными стилями и таким образом без любых дополнительных изменений мы получаем вертикальное меню.

Для создания горизонтального меню понадобятся дополнительные изменения в HTML и CSS.

В первую очередь добавьте класс в список. Замените

на

Теперь давайте сделаем меню горизонтальным с помощью CSS файла. У несортированного списка есть заданные по умолчанию параметры margin и padding. Нужно их обнулить:

ul.horizontal{
margin:0;
padding:0;
}

Теперь сделаем список горизонтальным:

ul.horizontal li{
display:block;
float:left;
padding:0 10px;
}

Мы добавили значения padding по горизонтали для того, что бы элементы не слиплись. Теперь меню готово и осталось только добавить в него ссылки, фон и отредактировать цвет шрифта.