0
219
VistasI'm trying to create two unordered list section within an unordered list, so that there are two dropdown menu
I want to create a Unordered List Section with 9 list items. The fist Li items contains an inner Unordered List. The fifth Li item also contain an inner Unordered List. The Li items containing inner UL have "-" and "+" sign respectively, when we mouseover these sign they switch and opens the inner UL
Here is the image Showing the UL section that i want to create
Also there is link for reference to show how the UL section work for better understanding Reference Link
Can anybody help me with recreating this section using HTML, CSS & JavaScript only
1 Respuestas
Responde la pregunta0
You have a really good reference to work with. You can see how it works by inspecting the code.
The reference has a ul inside a ul which is set to display:none and changes it to block on hover.
Here's a simple demo where the list expands on click.
const expand = () => {
const list = document.querySelector('.innerList');
list.classList.toggle('show');
}li {
list-style: none;
}
.innerList {
padding: 0;
display: none;
}
.show {
display: block
}<ul>
<li>one</li>
<li>one</li>
<li>
one
<button class='btn' onclick="expand()">+</button>
<ul class='innerList'>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</li>
<li>one</li>
<li>one</li>
</ul>