Set width: full 320 768 1024 1920 custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Multilevel Pop-down Menu</title>
<meta name="description" content="Responsive multilevel pop-down menu with submenus">
<style>
body {
margin: 0;
font-family: sans-serif;
}
.menu {
display: flex;
background-color: #333;
padding: 0;
margin: 0;
list-style: none;
}
input[type=checkbox] {
display: none;
}
.menu li {
position: relative;
}
.menu>li>a,
.menu>li>label {
display: block;
padding: 1rem 2rem 1rem 1rem;
color: white;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.menu>li:hover>a,
.menu>li:hover>label {
background-color: #444;
}
.submenu {
display: none;
position: absolute;
background-color: #444;
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
}
.submenu li {
position: relative;
}
.submenu li a,
.submenu li label {
display: block;
padding: 1rem 2rem 1rem 1rem;
color: white;
text-decoration: none;
cursor: pointer;
}
.menu>li:has(.submenu) label::after, .submenu li:has(.submenu) label::after {
content: "▶";
position: absolute;
right: 1rem;
font-size: .75em;
color: #ccc;
}
.menu>li:has(.submenu)>label::after {
content: "▼";
}
.submenu li a:hover,
.submenu li label:hover {
background-color: #555;
}
.submenu .submenu {
left: 100%;
top: 0;
}
.hamburger {
display: none;
font-size: 30px;
cursor: pointer;
padding: 1rem;
color: white;
background-color: #333;
}
#menu-toggle {
display: none;
}
@media (min-width: 1024px) {
.menu>li:hover>.submenu,
.submenu li:hover>.submenu {
display: block;
}
}
@media (max-width: 1023px) {
.menu>li:has(.submenu) label::after, .submenu li:has(.submenu) label::after {
content: "▼";
}
.menu {
flex-direction: column;
display: none;
}
.menu>li {
width: 100%;
}
.submenu {
position: relative;
}
.submenu .submenu {
left: 0;
margin-left: 1rem;
}
.hamburger {
display: block;
}
#menu-toggle:checked+.menu {
display: flex;
}
.menu>li>input[type="checkbox"] {
display: none;
}
.menu>li>input[type="checkbox"]:checked+.submenu,
.submenu li>input[type="checkbox"]:checked+.submenu {
display: block;
}
}
</style>
</head>
<body>
<label for="menu-toggle" class="hamburger">☰</label>
<input type="checkbox" id="menu-toggle">
<ul class="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<label for="submenu-1">About</label>
<input type="checkbox" class="submenu-checkbox" id="submenu-1">
<ul class="submenu">
<li>
<a href="#">Our Team</a>
</li>
<li>
<a href="#">Our Story</a>
</li>
<li>
<label for="submenu-2">Careers</label>
<input type="checkbox" class="submenu-checkbox" id="submenu-2">
<ul class="submenu">
<li><a href="#">Job Openings</a></li>
<li>
<label for="submenu-3">Internships</label>
<input type="checkbox" class="submenu-checkbox" id="submenu-3">
<ul class="submenu">
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Services</a>
<input type="checkbox" id="submenu-toggle-2">
<ul class="submenu">
<li><a href="#">Consulting</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Design</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</body>
</html>