Перед написанием стилей для выпадающего меню необходимо создать структуру 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;
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:'';}
В итоге у нас получилось следующее