originally wanted to do a three-level menu effect, the main menu shows the first-level menu and the second-level menu, and the third-level menu is positioned to the right relative to the second-level menu to display. The main menu is always fixed on the left and always 100% high, and the y-axis scrolls beyond itself, so overflow-y:auto; is added. It was originally expected that adding relative, to the second-level menu and then adding absolute to the third-level menu would make the three-level menu detached from the document stream to achieve the effect, but it was found that there was a horizontal scroll bar
html structure on the main menu:
<ul class="side">
<li>
<div class="menu-1"></div>
<ul class="menu-2">
<li></li>
<li></li>
<li>
<ul class="menu-3">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
</li>
</ul>css:
.side{
width:200px;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background-color:-sharp393C4D;
color:white;
text-align: center;
overflow-y:auto;
display: none;
}
.menu-2 li{
position: relative;
}
.menu-3{
position: absolute;
width:200px;
left: 200px;
background-color:-sharp393C4D;
color:white;
top: 0;
box-sizing: border-box;
} 