Єдино хочу додати, головне що робить горизонтальне меню горизонтальним це рядок float: left в контейнері nav> ul> li. Якщо не прописати це властивість то меню буде вертикальним.
В результаті у нас виходить такий вид меню:
Горизонтальне меню написано. В принципі цього достатньо, але що потрібно зробити, щоб меню вирівнювалося по центру сторінки? Давайте розглянемо такий варіант.
Вирівнюємо горизонтальне меню по центру
Загальний принцип такий:
Зрушуємо вміст списку ul за допомогою властивостей:
Центруємо меню, зрушуючи пункти li меню:
Але є одне але. Коли ми прописали ці властивості, у нас з'явитися нижня прокрутка. Хоча прокручувати по горизонталі здавалося б нічого, а наше горизонтальне меню коректно відображається. Це відбувається через те, що наш список ul фактично зрушать.
Для того, щоб уникнути цього непотрібного непорозуміння, пропишемо батьківського контейнеру списку, а саме nav. властивість overflow: hidden. За допомогою цієї властивості ми приховуємо весь вміст, яке виходить за його межі.
Як бачите, написати меню, для простого сайту, не так вже й складно. А центрировать його ще легше. Сподіваюся вам стати в нагоді даний урок.