Горизонтальне меню, що випадає на css і Html своїми руками. Гарне горизонтальне меню на всю ширину Bootstrap 4 розтягнути меню на всю ширину

Розділи сайту

Вибір редакції:

Досить поширена схема розташування меню сайту, коли контейнер із ним займає всю ширину, доступну на сторінці. При цьому перший пункт прилягає до лівого краю, а останній – до правого, а відстань між усіма елементами дорівнює. Сьогодні ми розповімо, як це робиться.

Ми пропонуємо приклад реалізації гумового меню за допомогою CSS для Вашого ресурсу. У цьому меню пункти будуть розміщені в один рядок. Javascript не використовуватиметься. Вміст меню буде поміщений у звичайний список. Головною рисою такого меню є універсальність, яка виявляється у тому, що як число, так і довжина пунктів може бути будь-яка.

Як це реалізувати?

Кожен програміст може запропонувати свій спосіб вирішення поставленого завдання. Все залежить від його фантазії, рівня професіоналізму та здібностей. Найбільш поширене вирішення цієї проблеми – використання таблиці. Також багато хто запропонував би скористатися JavaScript. Тих, хто запропонував би скористатися властивістю display зі значенням table або table-cell – поспішаю засмутити. Цей спосіб не має достатньої кросбраузерності.

Наше рішення

Наша пропозиція буде споруджена на міцному фундаменті зі знань HTML5 та CSS3.

Суть процесу виходить з властивості text-align зі значенням justify. Для тих, хто забув - нагадую: ця властивість орієнтує вирівнювання тексту по всій ширині контейнера.

При використанні нашого рішення має дотримуватися двох обов'язкових правил. Перше полягає в тому, що ширина контейнера пункту меню повинна бути меншою, ніж текст. Тобто не в один рядок. Друге важливе правило – слова розтягуються однаково, незалежно від цього, до одного пункту вони належать чи ні.

Нижче представлений код, який є прикладом створення «гумового» меню:

HTML

< ul> < li>< a href= "#" >Головна< li>< a href= "#" >Блог< li>< a href= "#" >Новини< li>< a href= "#" >Популярне< li>< a href= "#" >Новинки

ul (text-align: justify; overflow: hidden; /* усуває побічний вплив методу*/ height: 20px; /* теж усуває зайве */ cursor: default ; /* встановлює початкову форму курсора*/ margin: 50px 100px 0 100 background: #eee; padding: 5px; ) li ( display: inline; /* робить пункти меню текстовими */ ) li a ( display: inline- block; /* усуває розрив слів у меню */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* формування другого рядка для відпрацювання методу */ content: "1" ; margin- left: 100 %; height: 1px; overflow: hidden; display: inline- block; )

Для роботи в старому доброму Internet Explower необхідно додатково внести до CSS наступний код

ul ( z- index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100%; ) * html ul ( /* need ie6 only */ height: 30px; )

Прописавши необхідні значення властивостей та код, отримаємо ось таке гумове меню:

Недоліки методу

Об'ємний код

Неможливість визначення активного стану елемента через селектор класу. Це відбувається через розрив слів у пунктах (якщо воно одне). Вирішенням цієї проблеми буде додавання ще одного контейнера до елементів списку.

Для меню, що випадає, потрібно підганяти код через негативний вплив overflow .

У яких браузерах працює?


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Добридень!

Часто буває потрібно зробити горизонтальне меню, яке розтягуватиметься на всю ширину батьківського блоку незалежно від того, скільки пунктів у ньому міститься.

Сьогодні я хотів би вам показати, як створювати саме таке меню.

Отже, наше меню буде наступним:

Воно розтягнуте на всю ширину, при наведенні виділяється. З боків меню закруглено.

HTML РОЗМІТКА

...

Головна

Цікаві новини

Ще один пункт меню!

Щоб зробити меню на всю ширину, я використав таблиці зі 100% шириною. У кожній таблиці є div контейнер пункту меню. Залежно від того перший, останній або проміжний пункт меню - div присвоюється відповідний клас.

У кожному div контейнері є 2 бічні бордери з абсолютним позиціонуванням, які потрібні для коректного відображення. Якщо використовувати стандартні бордери, то при перемиканні пунктів меню текст скакатиме на 1-2 пікселі, що не є добре.

Клас active відповідає за вибраний пункт меню та виділяє його.

У кожному пункті у нас є картинка та текст. Щоб це вирівнювалося суворо посередині по вертикалі ми використовуємо таблицю. Завдяки властивості вертикального вирівнювання наші пункти меню завжди будуть рівно відображатися та не поїдуть.

CSS ПРАВИЛА

Спочатку задаємо стилі для загального відображення меню:

Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; / * вертикальне вирівнювання * / ) .last_point_men_, width: 100%; height: 47px; border: 1px; position: relative; ( padding: 0px; vertical-align: middle; border: none; text-align: left; width: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img (width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px; vertical-align: middle; border: none; text-align: left; ) .inner_table_title ( pad1 padding-right: 10px; text-transform: uppercase; line-height: 13px;

Для краси округлимо куточки з боків меню:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 1px solid #dadbda; -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; ;)

Тепер наше меню набуло більш гарного вигляду:

Поки що перший пункт не має лівого бордера. Його ми виправимо трохи згодом.

А зараз давайте додамо для меню ефекти при наведенні.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( background-col: gradient(top, #CAE285, #9FCB56); -gradient(top, #CAE285, #9FCB56); background-image: -o-linear-gradient(top, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #97ac4a; border-left: none; .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; border-; ( border: 1px solid #9FCB56; border-left: none;

border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )

Тепер наше меню виглядає набагато приємніше, але поки що у нас немає бордерів у виділених пунктів меню. Давайте це виправимо!

/* стилі для бічних бордерів */ .borderLeftSecond, .borderRightSecond ( display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) абсолютные смещения для бордеров */ .borderLeftSecond ( left: 0px; ) .borderRightSecond ( right: -1px; ) /* у активного и наведенного показываем бордеры */ .active .borderLeftSecond, .active .borderRightSecond, .middle_point_menu:hover > .borderLeftSecond . .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* обробляємо випадки першого та останнього пункту*/ : none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

От і все!

Вітання. Дуже давно не писав постів на тему html/css. Нещодавно почав верстати новий макет і в процесі натрапив на цікавий прийом, який дозволяє зробити меню гумовим (в нього можна буде додавати нові пункти і розмір не збільшитися, а завжди буде 100% батьківського блоку). Отже, сьогодні реалізуємо на css гумове меню.

Кому ліньки читати статтю, можна подивитися це відео. Автор також все дуже класно пояснює:

Гумове меню на CSS - крок 1

Перший крок - це завжди HTML розмітка, куди ж без неї. Але в нашому випадку все буде просто:

блок обгортка для меню

саме меню, виведене через маркований список (тег ul)

ну і пункти меню всередині, а в них, відповідно, вже посилання

Все зрозуміло, ось такий у мене код розмітки:

Виглядає все це стандартно, ось так:

Тепер приводитимемо все в потрібний вигляд, за роботу береться CSS.

Крок 2 - базові стилі

Далі я додам стилі блоку-обгортці. А саме, встановлю максимальну ширину в 600 пікселів (просто, щоб зручно було робити скріншот, щоб меню влазило), а також відцентрую блок.

Wrap(
background: #fff;
max-width: 600px;
margin: 0 auto;
}

Крок 3 - реалізуємо гумовість

Тепер беремося за саме меню. У нього (у тега ul) я приберу маркери, зроблю фоновий лінійний градієнт і, найголовніше, властивістю display: table-row примушу контейнер для меню поводитися як табличний ряд. Це важливо зробити для подальших маніпуляцій.

R-menu(
background: linear-gradient(to right, #b0d4e3 0%, #88bacf 100%);
display: table-row;
list-style: none;
}

Як бачите, наведений код вирішив усе, про що я писав. До речі, градієнти зручно генерувати за допомогою інструмента Ultimate CSS Gradient Generator. Про нього я ще якось напишу.

R-menu li(
vertical-align: bottom;
display: table-cell;
width: auto;
text-align: center;
height: 50px;
border-right: 1px solid #222;
}

vertical-align: bottom — ця властивість потрібна для того, щоб у випадку, якщо текст у пункті меню займе 2 рядки, він відображався рівно. Коли ми зробимо меню, можете видалити цю властивість, збільшити масштаб, щоб пункти стиснулися і текст перенісся на два рядки і побачите проблему з відображенням. Поверніть властивість і все буде гаразд.
display: table-cell - оскільки ми задали самому меню відображення табличним рядом, логічно буде задати його пунктам відображення як комірки в таблиці. Це обов'язково.
width: auto — ширина обчислюватиметься автоматично, залежно від довжини тексту в пункті
text-align: center — це просто для вирівнювання тексту всередині центром
height: 50px - задаємо висоту в 50 пікселів
ну і border-right це просто межа праворуч, такий роздільник для пунктів

Поки меню виглядає непоказно, але нічого, настав час довести його до пуття.

Останнє, що потрібно зробити, — задати стилі посиланням усередині пунктів. Тут у мене такий код:

R-menu li a (
text-decoration: none;
width: 1000px;
height: 50px;
vertical-align: middle;
display: table-cell;
color: #fff;
font: normal 14px Verdana;
}

І ось так тепер виглядає меню:

Знову ж таки, поясню деякі рядки:

властивість text-decoration скасовує підкреслення у посилань, що ставиться за умовчанням
width: 1000px - мабуть, найважливіший рядок. Потрібно задати посиланням приблизно таку ширину, можна і менше, але обов'язково більше максимально широкого пункту меню. Посилання не стануть завширшки 1000 пікселів, оскільки ширину обмежить пункт меню li, у якого ширина задана як auto, зате це дозволить зробити так, щоб за будь-якої кількості пунктів у меню воно завжди було на 100 відсотків ширини.
vertical-align: middle і display: table-cell — перше вирівняє текст по вертикалі центром, а друге також робить відображення посилань у вигляді осередків. Обидві властивості потрібні.
font — це просто набір установок для шрифту. Читайте про css властивості для шрифтів у цій статті.

Крок 4 (за бажанням) можна додати інтерактивності

Наприклад, щоб змінити колір пункту меню при наведенні. Реалізується це дуже просто, за допомогою псевдокласу.

R-menu li:hover(
background-color: #6bba70;
}

Тестуємо меню на гумовість

Відмінно меню готові, але ми не перевірили найголовніше — наскільки воно гумове, як я вам і обіцяв. Що ж, додам у меню ще 2 пункти:

Меню залишилося завширшки на 600 пікселів. Інші пункти просто трохи втиснулися, щоб помістилися 2 нових.

Додам ще 1 довгий пункт:

Як бачите, меню ще трохи зменшилося і довгий пункт відобразився цілком нормально. А якби не було властивості vertical-align: bottom, про яке я вам говорив, то меню виглядало б гірше.

Зменшу меню до трьох пунктів.

Пунктам стало набагато вільніше, але саме меню не змінилося в ширині. Ось ми і зробили 100% гумове меню!

Як його адаптувати?

В принципі, якщо ви задали блоку-обертку не фіксовану, а максимальну ширину, то його навіть не потрібно адаптувати. У моєму випадку у мене стоїть властивість max-width: 600px і коли ширина стане менше 600 пікселів, блок просто зменшуватиметься слідом за екраном, не утворюючи горизонтального прокручування.

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

Продовжуємо серію уроком присвячених меню, що випадає. На черзі горизонтальне меню, що випадає на css своїми руками.

Якщо ви потрапили сюди випадково або ви шукали іншу реалізацію меню, що випадає, раджу перейти в батьківський розділ.

У цьому розділі буде описано горизонтальне меню, що випадає на CSS і HTML.

Навігація по сторінці:

І так, Наша задача:

зробити горизонтальне меню зі списком css (на списках ul li) без використання jQuery і Javascript, а також без застосування таблиць

у коді.

Горизонтальне меню, що випадає

Насамперед, перед тим як приступати писати код, нам потрібно зробити html шаблон для меню.

У зв'язку з тим, що ми робимо універсальне меню, я хочу зробити його максимально схожим під виведення меню WordPress. На мій погляд, це один із найпростіших і універсальних Html кодів меню. Виглядає він так:

Головна
Про нас
Наші послуги
- Наша послуга №1
- Наша послуга №2
- Наша послуга №3
- Наша послуга №4
- Послуга 5
Новини
Контакти

Як видно з коду, наше меню, що випадає, буде реалізовано на списках ul і li. Ось так виглядає це меню без стилів CSS:

Скажімо, прямо виглядає потворно, як звичайний список. Далі нам потрібно прикрасити це меню за допомогою стилів CSS.

Горизонтальне меню, що випадає на CSS

Стилі CSS для меню, що випадає, і не тільки – річ необхідна як повітря. Адже вкладка, що випадає, робиться на основі псевдокласу: hover.

Для горизонтального меню, що випадає, нам знадобляться ось такі стилі:

#menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100 %; height:auto; list-style:none; background:#F3A601; ; menu1 ul li( position:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- family:Arial, sans-serif;#ffffef;1; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )

Це ще не кінець, а лише частина CSS для головного горизонтального меню. Далі ми напишемо стилі для списку меню:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;) механізм випадання*/ #menu1 ul li ul li(float:none; width:100%; ) #menu1 ul li ul li(display:block;text-transform:none; 100%; box-sizing:border-box; border-top:1px solid #ffffff; background:#FDDC96;

Ось тепер усі. Сам механізм випадки реалізований одним рядком.

Дивіться скін із цим меню:

Мал. 2 (горизонтальне меню, що випадає)

Нижче доступний демо перегляд роботи меню, що випадає, а також посилання на скачування вихідних. (Демо буде відкрито випадкою поверх цієї сторінки, не потрібно натискати відкрити в новому вікні 🙂 або коліщатко мишки)

Горизонтальне меню, що випадає на всю ширину

Більшість з вас можуть мені дорікнути, мовляв такі менюшки, як я показав вище, це привіт з минулого і від частини ви маєте рацію, хоча я зустрічав свіжі верстки з такими менюшками.

Сподіваюся ви завантажили приклад вище. Html у нас залишається колишнім, а ось CSS ми змінимо повністю. Ви можете просто взяти від сюди код CSS і вставити в завантажений приклад, або ж подивитися в режимі демо, як він працює.

#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; :relative; display:inline-block; width:auto; height:auto; : 14px; :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) :0px;

display: none;

width:auto;

background:#EBBD5B;

white-space:nowrap;

) #menu1 ul li:last-child ul(/*останній пункт буде прикріплений по правому краю*/ left:auto; right:0px; ) випадання*/ #menu1 ul li ul li(display:block; width:auto; ) #menu1 ul li ul li(display:block; text-transform:none; height:auto; ; box-sizing:border-box; border-top:1px solid #ffffff; #FDDC96;

Існує кілька десятків варіантів, як на чистому CSS додати смужку (розділювач) між пунктами меню. Варіанти, які використовують::before або::after , або набагато простіше border-left, border-right я дублювати не буду.

Бувають ситуації, коли верстка побудована так чудово, що без jquery не обійтися.

Html код у нас залишається колишнім, ми тільки підключаємо на самому початку бібліотеку jQuery та файл, який її використовує:

Відразу після .

Як ви зрозуміли, потрібно створити файл script-menu-3.jsі туди закинути такий маленький код:

$(document).ready(function()( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

Стилі CSS для такого меню потрібно залишити ті, що є, + закинути ось цей шматок в кінець:

#menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; )

Виглядати таке горизонтальне меню з роздільниками на jQuery буде ось так:

Можна переглянути в режимі демо або завантажити шаблон горизонтального меню нижче:

Перевагами такого рішення є:

меню тягнеться динамічно;
відступи від роздільника до пункту скрізь однакові;
більш красиве та гнучке оформлення.

Горизонтальне багаторівневе меню CSS+HTML

Раз йшлося про багаторівневі випадають меню при наведенні, напевно варто поділити їх на підгрупи:

з випадашкою при наведенні убік

зі спливаючою випадкою третього рівня

У своїх прикладах я показуватиму багаторівневе меню CSS на 3 рівні, далі думаю буде не складно здогадатися що потрібно робити.

Багаторівневе меню, що випадає з випадашкою в бік при наведенні

Для початку нам потрібно трохи підкоригувати наш хтмл. Там додасться пара рядків для 3 рівня:

Головна
Про нас
Наші послуги
- Наша послуга №1
  - Додаток до послуги 1
  - Додаток до послуги 2
- Наша послуга №2
  - Додаток до послуги 3
  - Додаток до послуги 4
- Наша послуга №3
- Наша послуга №4
- Послуга 5
Новини
Контакти
- Карта проїзду
  - Додаток для картки
  - Додаток для картки 2
- Форма зворотного зв'язку

#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; :relative; display:inline-block; width:auto; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; em; text-decoration:none; font-weight:bold; (Background: #EBBD5B;

color:#2B45E0;

) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*останній пункт буде прикріплений по правому краю*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*ця строчка реалізує механізм випадання*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last-child > ul ul(left:auto; right:100%;) #menu1
Файли для jQuery копіюємо як були з попереднього прикладу. Вирішив залишити роздільники, щоб меню хоч трохи краще виглядало. Можна, звісно, і без них.

Ось так вийшло:

Я зробив 2 скіни в одному, щоб показати як випадок виглядає праворуч і посередині.

Нижче ви можете подивитися демо і скачати приклад:

Багаторівневе меню, що випадає зі спливаючою випадашкою при наведенні

ХТМЛ код я міняти не буду, його можна взяти з попереднього прикладу. Розділювачі на jQuery також залишаємо.

Змінюватиметься тільки CSS повністю:

#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; width:100%; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; :relative; display:inline-block; width:auto; :28px; width:1px; background:#ffffff; margin-top:4px ; serif;#ffffef;line-height:1;3em; a:hover, #menu1 ul li:hover > a( background:#EBBD5B;

color:#2B45E0;

) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content #" ; :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; - box; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; z-index:15; ) #menu1 block; float:none; width:100%;) #menu1 ul li ul li ul a(color:#F38A01;

Ось так меню буде виглядати: Єдиний момент - сайт має бути достатньо місця, так як крайнього пункту справа немає місця для випадки. Цю проблему можна вирішити через: nth-child але я не став городити город.

На цьому в мене все, сподіваюсь, хоч один мій приклад вам підійшов. Дякую за увагу.

це принесе користь і їм, і мені 🙂.

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

Також, раджу відвідати батьківську сторінку https://сайт/vypadayushhee-menu/, там зібрані всі приклади та різновиди меню.

Горизонтальне меню є список розділів сайту, тому логічніше розмітити всередині елемента

За замовчуванням всі елементи списку розташовуються вертикально, займаючи по ширині всю ширину елемента контейнера, який займає всю ширину його блока-контейнера.

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

Пункт меню
Пункт меню
Пункт меню

Горизонтальне меню, що знаходиться всередині тега , можна додатково поміщати всередину елемента ... та/або ... . Завдяки цьому html-розмітці надається семантичний зміст, а також з'являється додаткова можливість форматування блоку меню.

Існує кілька способів розмістити їх горизонтально. Для початку потрібно скинути стилі браузера за промовчанням для елементів навігації:

Ul ( list-style: none; /*прибираємо маркери списку*/ margin: 0; /*прибираємо верхнє і нижнє поле, що дорівнює 1em*/ padding-left: 0; /*прибираємо лівий відступ, рівний 40px*/ ) a ( text-decoration: none; /*прибираємо підкреслення тексту посилання*/)

Робимо елементи списку малими. В результаті вони розташовуються по горизонталі, праворуч між ними додається проміжок, що дорівнює 0.4em (обчислюється щодо розміру шрифту). Щоб прибрати його, додаємо li негативне праве поле li (margin-right: -4px;) . Далі стилізуємо посилання за власним бажанням.

Робимо елементи списку плаваючими. В результаті вони розташовуються по горизонталі. Висота блоку-контейнера ul стає рівною нулю. Щоб вирішити цю проблему, додаємо для ul (overflow: hidden;) , розширюючи його і дозволяючи йому утримувати плаваючі елементи. Для посилань додаємо a (display: block;) та стилізуємо їх за своїм бажанням.

Робимо елементи списку рядково-блоковими. Вони розташовуються по горизонталі, праворуч утворюється проміжок, як і першому випадку. Для посилань додаємо a (display: block;) та стилізуємо їх за своїм бажанням.

Робимо список ul гнучким контейнером за допомогою моделі. В результаті елементи списку розміщуються горизонтально. Додаємо для посилань a (display: block;) та стилізуємо їх за своїм бажанням.