I am currently working on creating a multi-level accordion for an aside navigation section on a webpage. However, I have encountered an issue where the background color extends too far when hovering over a specific element. This occurs on a folder-type item with child elements, which is itself a child of another folder.
To see the problem in action, you can check out the JSFiddle linked here. The discrepancy between "Folder 3" and other items is quite noticeable. Can anyone suggest a way to make it consistent?
.accordion {
list-style: none;
margin: 0;
padding: 0;
}
aside {
background-color: orange;
flex: 1;
flex-direction: column;
left: 0;
margin-left: 20px;
margin-right: 20px;
position: absolute;
width: 150px;
z-index: 1;
}
.container {
display: flex;
position: relative;
}
.input {
position: absolute;
opacity: 0;
}
.label {
display: inline-block;
width: 100%;
}
.label:hover,
.item:not(.has-children):hover {
background-color: red;
}
.label-l1 {
padding-left: 20px;
}
.label-l2 {
padding-left: 40px;
}
.main {
background-color: yellow;
flex: 1;
flex-direction: column;
margin-left: 170px;
width: 200px;
}
.sub {
display: none;
list-style: none;
margin-left: 0;
padding-left: 0;
width: 100%;
}
.input:checked~.sub {
display: block;
}<html>
<body>
<div class="container">
<aside>
<ul class="accordion">
<li class="item has-children">
<input class="input" type="checkbox" name="c1" id="c1">
<label class="label" for="c1"><span>Folder 1</span></label>
<ul class="sub sub-l1">
<li class="item"><a href="" class="label-l1">Item 1</a></li>
<li class="item"><a href="" class="label-l1">Item 2</a></li>
</ul>
</li>
<li class="item has-children">
<input class="input" type="checkbox" name="c2" id="c2">
<label class="label" for="c2"><span>Folder 2</span></label>
<ul class="sub sub-l1">
<li class="item has-children">
<input class="input" type="checkbox" name="c3" id="c3">
<label class="label label-l1" for="c3"><span>Folder 3</span></label>
<ul class="sub sub-l1">
<li class="item"><a href="" class="label-l2">Item 3</a></li>
<li class="item"><a href="" class="label-l2">Item 4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</aside>
<div class="main">
<p>I must express my thoughts on this matter.</p>
</div>
</div>
</body>
</html>