I am currently working on a dropdown multicolumn menu that contains nested lists. My goal is to ensure that all three lists (or columns) have the same height, even if they contain a different number of items. Since the lists are dynamic and the number of items can vary, I am wondering if it is possible to achieve this without having to rewrite the HTML code. The image linked below illustrates what I am trying to accomplish:
https://i.sstatic.net/Kigu7.png
const firstlevel = document.querySelectorAll(".first-level > li");
const secondlevel = document.querySelectorAll(".second-level > li");
const menuButton = document.querySelector(".menu-button")
menuButton.addEventListener("click", (e) => {
menuButton.classList.add('active');
});
firstlevel.forEach((item) => {
item.addEventListener("click", (e) => {
firstlevel.forEach((elem) => {
elem.classList.remove("active");
});
item.classList.add("active");
item.querySelector('ul > li').classList.add("active");
});
});
secondlevel.forEach((item) => {
item.addEventListener("click", (e) => {
secondlevel.forEach((elem) => {
elem.classList.remove("active");
});
item.classList.add("active");
});
});*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
padding: 10px;
}
.dropdown {
margin: 0;
padding: 0;
list-style: none;
width: 100px;
background-color: #0abf53;
}
.dropdown li {}
.dropdown li a {
color: #ffffff;
text-align: center;
text-decoration: none;
display: block;
padding: 10px;
}
.dropdown li ul {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
display: none;
line-height: normal;
background-color: #333;
}
.dropdown li ul li a {
text-align: left;
color: #cccccc;
font-size: 14px;
padding: 10px;
display: block;
white-space: nowrap;
}
.dropdown li ul li a:hover {
background-color: #0abf53;
color: #ffffff;
}
.dropdown li ul li ul {
left: 100%;
top: 0;
}
ul li:hover>a {
background-color: #0abf53;
color: #ffffff !important;
}
ul li.active>ul {
display: block;
}<ul class="dropdown">
<li class="menu-button"><a href="#">Menu</a>
<ul class="first-level">
<li class="active"><a href="#">1</a>
<ul class="second-level">
<li class="active"><a href="#">1-1</a>
<ul>
<li><a href="">1-1-1</a></li>
<li><a href="">1-1-2</a></li>
<li><a href="">1-1-3</a></li>
</ul>
</li>
<li><a href="#">1-2</a>
<ul>
<li><a href="">1-2-1</a></li>
<li><a href="">1-2-2</a></li>
<li><a href="">1-2-3</a></li>
</ul>
</li>
<li><a href="#">1-3</a>
<ul>
<li><a href="">1-3-1</a></li>
<li><a href="">1-3-2</a></li>
<li><a href="">1-3-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">2</a>
<ul class="second-level">
<li><a href="#">2-1</a>
<ul>
<li><a href="">2-1-3</a></li>
<li><a href="">2-1-3</a></li>
<li><a href="">2-1-3</a></li>
</ul>
</li>
<li><a href="#">2-2</a>
<ul>
<li><a href="">2-2-3</a></li>
<li><a href="">2-2-3</a></li>
<li><a href="">2-2-3</a></li>
</ul>
</li>
<li><a href="#">2-3</a>
<ul>
<li><a href="">2-3-1</a></li>
<li><a href="">2-3-2</a></li>
<li><a href="">2-3-3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>This is my current attempt: https://codepen.io/Agrimensor/pen/vYgGJwr