Skip to content

Instantly share code, notes, and snippets.

@frontend-coder
Created October 25, 2023 19:28
Show Gist options
  • Save frontend-coder/2248aa630e1edcdd3a8993f01812bedd to your computer and use it in GitHub Desktop.
Save frontend-coder/2248aa630e1edcdd3a8993f01812bedd to your computer and use it in GitHub Desktop.
Мультилевел меню #menu
<nav>
<ul class="topmenu">
<li><a href="#">munu 1 levels</a>
<ul class="submenu">
<li><a href="#">menu 2 level</a></li>
<li><a href="#">menu 2 level</a>
<ul class="submenu">
<li><a href="#">menu 3 level</a></li>
<li><a href="#">menu 3 level</a></li>
<li><a href="#">menu 3 level</a></li>
<li><a href="#">menu 3 level</a></li>
</ul>
</li>
<li><a href="#">menu 2 level</a>
<ul class="submenu">
<li><a href="#">menu 3 level</a></li>
<li><a href="#">menu 3 level</a></li>
<li><a href="#">menu 3 level</a></li>
<li><a href="#">menu 3 level</a>
<ul class="submenu">
<li><a href="#">menu 4 level</a></li>
<li><a href="#">menu 4 level</a></li>
<li><a href="#">menu 4 level</a></li>
<li><a href="#">menu 4 level</a></li>
<li><a href="#">menu 4 level</a></li>
<li><a href="#">menu 4 level</a></li>
<li><a href="#">menu 4 level</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu 2 level</a></li>
</ul>
</li>
<li><a href="#">munu 1 levels</a></li>
<li><a href="#">munu 1 levels</a></li>
<li><a href="#">munu 1 levels</a></li>
</ul>
</nav>
/* код впипадающего меню
*/
.topmenu {
display: flex;
background-color: #3b3b3b;
& li {
list-style: none;
& a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: #ffffff;
width: 100%;
}
}
}
.submenu {
position: absolute;
z-index: 5;
margin: 0;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: rotateX(-90deg);
transform-origin: 0 0;
transition: 0.3s linear;
& li, .submenu .submenu li {
position: relative;
margin: 0;
background-color: #eeeeee;
///width: 100%;
}
& .submenu {
position: absolute;
left: 100%;
top: 0;
margin: 0;
transition: 0.3s linear;
}
& li a {
border-bottom: 1px solid #000000;
padding: 10px 20px;
color: #1e1e1e;
background-color: #eeeeee;
}
}
.topmenu li:hover >.submenu {
opacity: 1;
visibility: visible;
transform: rotate(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment