Настройка: < /p>
- 3 уровня меню с обработчиками jQuery для отображения /скрытия второго и третьего меню. < /Li>
.nav-container {
background: #f2f2f2;
padding: 32px 24px;
}
.nav-container .menu, .nav-container .sub-menu, .nav-container .sub-sub-menu {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-container .menu .menu-item, .nav-container .sub-menu .menu-item, .nav-container .sub-sub-menu .menu-item {
padding: 12px 0;
}
.nav-container .menu .menu-item:not(:last-of-type), .nav-container .sub-menu .menu-item:not(:last-of-type), .nav-container .sub-sub-menu .menu-item:not(:last-of-type) {
border-bottom: 1px solid #9e9e9e;
}
.nav-container .menu .menu-item .menu-link, .nav-container .sub-menu .menu-item .menu-link, .nav-container .sub-sub-menu .menu-item .menu-link {
color: #000;
font-family: sans-serif;
text-decoration: none;
}
.nav-container .sub-menu, .nav-container .sub-sub-menu {
display: none;
}
.nav-container .sub-menu--active, .nav-container .sub-sub-menu--active {
display: block;
}
.nav-container .sub-menu {
padding-left: 8px;
}
.nav-container .sub-sub-menu {
padding-left: 16px;
}
< /code>
- Submenu Item 3
- Submenu Item 4
- Menu Item 3
- Menu Item 4
- Submenu Item 3
-
Submenu Item 4
[/code]
Подробнее здесь: https://stackoverflow.com/questions/796 ... -within-it