Инструкция
1
Чтобы начать создание горизонтального меню, перейдите в Manage Style, далее нажмите кнопку New Style. Присвойте новому стилю название Selector ul li. Важно! Удостоверьтесь, что созданный файл имеет расширение drop-down.css. Чтобы сделать горизонтальное меню, укажите созданному элементу, что он будет именно горизонтальным. Далее определите ширину каждого пункта меню и уберите все лишние точки, расставленные перед всеми пунктами списка.
2
Перейдите в опцию Layout, установите атрибут Display, придав ему значение Inline, чтобы сделать горизонтальное выравнивание. Далее придайте значение Left атрибуту Float и нажмите кнопку «Применить» - Apply. Установите все элементы списка в одну строку. Чтобы они расставились аккуратно и не заползали друг на друга, в атрибуте Width установите значение Position равным 150 рх. Проверьте, чтобы все элементы списка стали одинаковыми по размеру. Далее уберите точки перед всеми элементами - для этого перейдите в атрибут List и в пункте List Style-type установите параметр None. Нажмите Ок, чтобы все изменения были приняты и вступили в силу.
3
Настройте размер и стиль шрифта для ul li. Для этого перейдите в Manage Styles и кликните правой кнопкой мыши на ul li, после чего выберите Modify Style. Появится уже знакомое диалоговое окно. Перейдите в пункт Font, выберите атрибут Font-family и установите для него значения Sans-serif, Arial, Helvetica. Далее скорректируйте размер шрифта, установив для него значение 0,9. После этого для атрибута Text-transform установите значение Uppercase. Скорректируйте высоту пунктов меню в атрибуте Height - Position, выставив значение 30 рх.
4
После завершения всех корректирующих операций сохраните файл как menu.html. Далее протестируйте созданное меню в различных браузерах, чтобы убедиться в корректности его работы. Как видите, конструкция горизонтального меню достаточно проста.
Видео по теме