Горизонтальное меню css

Сегодня мы обсудим, как сделать горизонтальное меню css и так приступим к показу самого элемента.

Вот так он выглядит:

Достаточно нетрудный элемент горизонтальное меню css, в данной статье вы узнаете, как его сделать. Для начала сделаем разметку HTML:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
</ul>

Тут ничего трудного, просто создаем составляющую ul и в него 5 элементов списка с одноименным текстом и внутри каждого li ссылка, так как это меню.

Теперь пропишем CSS:

ul{
	list-style-type: none;
}

ul > li{
	display: inline-block;
	margin: 0 10px;
}

ul > li > a{
	background-color: #f2f2f2;
	text-decoration: none;
	color: #222;
	transition: all .5s ease;
	padding: 15px;
	display: block;
}

ul > li > a:hover{
	color: orange;
	background-color: #f6f6f6;
}

Все свойства описывать не буду, так как я думаю вы прошли наш бесплатный интерактивный курс по CSS.

Далее, чтобы разработать то самое горизонтальное меню css, стоило удалить точки у списка свойством лист стайл и изменить дисплэй у самих элементов меню с помощью свойства дисплей инлайн блок, также для красоты прописать отступы и эффект при наведении.

Поздравляю ты смог сделать горизонтальный список в css.

Чтобы более подробно разобраться в данной теме "Горизонтальное меню css" советую посмотреть наше видео на эту тему:

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!