43 подписчика

Выпадающее меню на CSS

20 апреля 202220 апр 2022

2 мин

Перед написанием стилей для выпадающего меню необходимо создать структуру HTML документа. Данная структура будет представлять из себя обычный скелет сайта с добавленными тегами для меню. Меню будем создавать используя списки <UL> или <OL>. Итак приступим к написанию основной структуры сайта <!DOCTYPE html>

<html>

<head>

<title> Выпадающее меню на CSS </title>

</head>

<body>

</body> После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL> <nav>

<ul>

<li><a href='#'>Главная</a></li> <li><a href='#'>HTML</a></li> <li><a href='#'>CSS</a></li> <li><a href='#'>PHP</a></li> <li><a href='#'>JavaScript</a></li> </ul> </nav> Меню верхнего уровня у нас создано. Теперь необходимо назначить стили для элементов меню. nav { margin: 50px 0;

bacground-color: #E94f56; } nav ul { padding: 0; margin: 0; list-style: none;

<html>

<head>

<title> Выпадающее меню на CSS </title>

</head>

<body>

<ul>

bacground-color: #E94f56; } nav ul { padding: 0; margin: 0; list-style: none;

Итак приступим к написанию основной структуры сайта

<!DOCTYPE html>
<html>
<head>
<title> Выпадающее меню на CSS </title>
</head>
<body>

</body>

После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL>

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

<li><a href='#'>HTML</a></li>

<li><a href='#'>CSS</a></li>

<li><a href='#'>PHP</a></li>

<li><a href='#'>JavaScript</a></li>

</ul>

</nav>

Меню верхнего уровня у нас создано. Теперь необходимо назначить стили для элементов меню.

nav {

margin: 50px 0;
bacground-color: #E94f56;

}

nav ul {

padding: 0;

margin: 0;

list-style: none;

position: relative;

}

nav ul li {

margin: 0px -7px 0 0;

display: inline-block;

background-color: #E94f56;

}

nav a {

display: block;

padding: 0 10px;

color: #ffff;

font-size: 23px;

line-height: 60px;

text-decoration: none;

}

nav a:hover {

backgroung-color: #000001;

}

Проверим то что у нас получилось.

Теперь наше меню выглядит как меню. Теперь нам необходимо создать вложенное меню. Его мы создаем путем добавления внутрь тега <LI> еще одного списка <UL>. То есть у нас получается список в списке. Создадим структуру с вложенным меню.

<nav>

<ul>

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

<li><a href='#'>HTML</a>

<ul>

<li><a href='#'>История HTML</a></li>

<li><a href='#'>Структура HTML</a></li>

<li><a href='#'>HTML5</a></li>

</ul>

</li>

<li><a href='#'>CSS</a></li>

<li><a href='#'>PHP</a></li>

<li><a href='#'>JavaScript</a></li>

</ul>

</nav>

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

nav ul ul {
display: none;
position: absolute;
top100%;
}
nav ul li:hover>ul {
display: inherit;
}
nav ul ul li {
min-width: 180px;
float: none;
display:list-item;
position: relative;
}

Должно получиться следующее

Добавим для пункта меню с вложенным подменю соответствующий индикатор.

li> a:after {content: '+'}
li> a:only-child:after {content:'';}

В итоге у нас получилось следующее