Как сделать горизонтальное меню

Создание меню, наверное, одним из главных пунктов в разработке сайтов и программ. К тому же хорошая проработка и логическая конструкция такого меню является лицом сайта или любой программы. Для примера приведем, компанию Microsoft и операционную систему Windows 7. После выхода в свет Windows 7, компания Microsoft услышала много не лестной для себя критики в свой адрес. Критиковали много всего, но чаще всего неудобно расположенные пункты меню.Внимательно прочтите данную инструкцию по созданию горизонтального выпадающего меню при помощи CSS и Expression Web. Для создания меню будут меняться стили тегов

.

Инструкция

1. Перейдите в Manage Styles и затем нужно нажать кнопку New Style. Присвойте имя Selector ul li, только что созданному новому стилю. Также не забудьте удостовериться, новый стиль должен быть определен в файле drop-down.css.
2. Для растяжения горизонтального меню необходимо указать элементам меню, что оно будет горизонтальным. Далее необходимо определить ширину каждого пункта меню и убрать все лишние точки перед всеми элементами списка.
3. Для горизонтального выравнивания перейдите в Layout и установите атрибут display в значение inline. Атрибут float установите в значение left. Нажмите кнопку Apply. Все элементы списка должны быть установлены в одну строчку. Для того чтобы они не налезали друг на друга нужно выполнить следующие действия: установить значение Position атрибута width в значение 150px. Теперь проверьте. Все элементы списка должны стать одинакового размера.
4. Теперь нужно постараться убрать точки перед элементами списка. Для этого перейдите в List и для атрибута list-style –type установите значение none.
5. Нажмите ОК чтобы принять все изменения.
6. Чтобы настроить размер шрифта для стиля ul li, необходимо выполнить следующее. В Manage Styles нажмите правой кнопкой мыши на стиле ul li вам нужно выбрать Modify Style. Откроется знакомое диалоговое окно для добавления или изменения атрибутов. Перейдите в категорию Font и для атрибута font-family установите значение Arial, Helvetica, sans-serif. Далее переходим в атрибут font-size и устанавливаем для него значение 0.9em. После этого настраиваем атрибут text-transform, для него установим значение uppercase.
7. Высоту пунктов в созданном меню можно настроить в категории Position. Установить атрибут height в значение 30px.
8. Далее необходимо сохранить файл menu.html. Для этого Expression Web откроет необходимое окно Save Embedded Files, для сохранения файла. Сохраните в файле drop- down.css. Нажмите ОК для сохранения.
9. Теперь проверьте полученный результат. Для надежности лучше его протестировать в различных браузерах. Чтобы проверить полученный результат в браузере по умолчанию, необходимо нажать клавишу F12 на клавиатуре.