Горизонтальное меню для сайта

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента <ul>, а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.

Как сделать горизонтальное меню: разметка и примеры оформления

• 
  

HTML-разметка и базовые стили для горизонтального меню

По умолчанию все элементы списка <li>...</li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>...</ul>, который в свою очередь занимает всю ширину его блока-контейнера.

HTML разметка для горизонтальной навигации

<ul>
<li><a href="">Пункт меню</a></li>
<li><a href="">Пункт меню</a></li>
<li><a href="">Пункт меню</a></li>
...
</ul>

Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
  padding-left: 0; /*убираем левый отступ, равный 40px*/
}
a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}

Способ 1. li {display: inline-block;}

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.