Пример 1. Многоуровневое меню
Ниже представлен код HTML и CSS с помощью которых можно на своем сайте организовать двухуровневое меню.
<nav class="menu1">
<ul>
<li class="level1"><a href="index.html">Главная</a></li>
<li class="level1 has-sabmenu"><a href="lessons.html">Уроки</a>
<ul>
<li class="level2"><a href="lesson1.html">Урок 1</a></li>
<li class="level2"><a href="lesson2.html">Урок 2</a></li>
<li class="level2"><a href="lesson3.html">Урок 3</a></li>
<li class="level2"><a href="lesson4.html">Урок 4</a></li>
<li class="level2"><a href="lesson5.html">Урок 5</a></li>
</ul>
</li>
<li class="level1 has-sabmenu"><a href="#">Справочник</a>
<ul>
<li class="level2"><a href="https://html5book.ru/osnovy-html/">HTML</a></li>
<li class="level2"><a href="https://html5book.ru/css-css3/">CSS</a></li>
</ul>
</li>
<li class="level1 has-sabmenu"><a href="examples.html">Примеры</a>
<ul>
<li class="level2"><a href="example1.html">Пример 1</a></li>
<li class="level2"><a href="example2.html">Пример 2</a></li>
<li class="level2"><a href="example3.html">Пример 3</a></li>
<li class="level2"><a href="example4.html">Пример 4</a></li>
</ul>
</li>
<li class="level1"><a href="about.html">Об авторе</a></li>
<li class="level1"><a href="contacts.html">Контакты</a></li>
</ul>
</nav>
.menu1 {
position: relative;
display: block;
width: 100%;
height: auto;
z-index: 10;
background-color: #5590ff;
}
.menu1 ul {
position: relative;
display: block;
margin: 0;
padding: 0;
width: 100%;
height: auto;
list-style: none;
}
.menu1 ul::after {
display: block;
width: 100%;
height: auto;
clear: both;
content: "";
}
.menu1 ul li {
position: relative;
display: block;
float: left;
width: auto;
height: auto;
}
.level1 {
background: #5590ff;
border-right: solid 1px #000000a0;
}
.level1:hover {
background: #3377ff;
border-right: solid 1px #000000a0;
}
.level1 > a {
color: #fff;
}
.level2 {
background: #3377ff;
}
.level2:hover {
background: #0055ff;
}
.menu1 ul li a {
display: block;
padding: 9px 25px 0px;
font-size: 14px;
line-height: 1.3em;
text-decoration: none;
font-weight: bold;
height: 36px;
box-sizing: border-box;
}
.menu1 ul li ul {
position: absolute;
top: 36px;
left: 0;
display: none;
width: 200px;
}
.menu1 ul li:hover ul {
display: block;
}
.menu1 ul li ul li {
float: none;
width: 100%;
}
.menu1 ul li ul li a {
display: block;
text-transform: none;
height: auto;
padding: 7px 25px;
width: 100%;
box-sizing: border-box;
border-top: 1px solid #ffffff;
color: #ffffff;
}
.menu1 ul li ul li:first-child a {
border-top: 0;
}
.has-sabmenu {
padding-right: 15px;
}
.has-sabmenu::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 8px;
width: 15px;
background-image: url(../img/btn-arrow.svg);
background-position: right;
background-repeat: no-repeat;
cursor: pointer;
z-index: 1;
}
.has-sabmenu ul {
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
}