Skip to content

Instantly share code, notes, and snippets.

@ebela

ebela/multilevel_css_menu.html

Created December 7, 2022 06:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ebela/b7943413ffe546a44ec1f722f674fc77 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ebela/b7943413ffe546a44ec1f722f674fc77 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
multilevel_css_menu.html
<style type="text/css">
.menu-container .menu a{
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
}
.menu-container ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
color: rgb(106, 140, 185);
background-color: white;
}
.menu-container ul li.menu-item-has-children > ul {
display: none;
}
.menu-container ul ul {
left: 100%;
position: absolute;
top: -1px;
}
.menu-container li {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
position: relative;
border: 1px solid rgb(0,59,136);
border-bottom: none;
}
.menu-container li:last-child {
border: 1px solid rgb(0,59,136);
}
.menu-container li a{
text-decoration: none;
}
/* Change the link color on hover */
.menu-container li a:hover {
color: red;
text-decoration: underline;
}
/* Show the direct sub nested-dropdowns when hovering the list item */
.menu-container ul li:hover > ul {
display: block;
}
</style>
<div class="menu-container">
<ul id="primary-menu" class="menu">
<li class="menu-item menu-item-has-children">
<a href="#">Menu1</a><span class="btn-submenu"></span>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Submenu1-1</a></li>
<li class="menu-item"><a href="#">Submenu1-2</a></li>
<li class="menu-item"><a href="#">Submenu1-3</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Menu2</a><span class="btn-submenu"></span>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Submenu2-1</a></li>
<li class="menu-item menu-item-has-children"><a href="#">Submenu2-2</a><span class="btn-submenu"></span>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Subsubmenu2-2-1</a></li>
<li class="menu-item"><a href="#">Subsubmenu2-2-2</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Submenu2-3</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Menu3</a></li>
<li class="menu-item menu-item-has-children"><a href="#">Menu4</a><span class="btn-submenu"></span>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Submenu4-1</a></li>
<li class="menu-item"><a href="#">Submenu4-2</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Menu5</a></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment