Доброго времени суток.
Столкнулся со следующей проблемой:
Делаю фиксированное по позиции меню с определенной высотой с несколькими уровнями вложенности.
Вложенные меню должны выдвигаться в правую сторону.
Как сделать так, чтобы подменю выдвигались без расширения зоны родителя наружу, при этом была возможность скролла меню в позиции fixed
.
* {
transition: .4s;
}
.lvl1,
.lvl2 {
border: 1px solid gray;
background-color: lightblue;
width: 150px;
}
.lvl1 {
position: fixed;
left: 0;
top: 0;
overflow-y: scroll;
/*убрать строку, чтобы увидеть как примерно должно быть*/
height: 150px;
}
.lvl2 {
background-color: lightyellow;
position: absolute;
left: -400px;
top: 0;
width: 100px;
}
.lvl1>li:hover .lvl2 {
left: 250px;
}
<ul class="lvl1">
<li>Hover to here
<ul class="lvl2">
<li>2</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ul>
Песочница : https://jsfiddle.net/hk2jvL1c/2/