I am facing an issue with my menu where it has grown in size, making it necessary to have a scroll function for easier navigation. I have successfully implemented the scrolling feature.
However, within this menu is a submenu that should extend out to the side. I have also achieved this without any problems.
The challenge arises when trying to combine both functionalities - once the menu becomes scrollable, the submenu gets clipped, particularly in Chrome.
What are some effective solutions (aside from less ideal ones) to ensure that the submenu remains visible even when the main menu is scrollable?
Below is a code snippet illustrating the scenario:
function makeScrollable(){
var outer = document.getElementById("outer");
outer.style.overflowY="auto";
}
ul{
list-style:none;
border: 1px solid black;
background-color: grey;
padding: 10px;
}
#outer{
position: absolute;
right: 10px;
max-height: 80px;
}
#inner{
position:absolute;
right: 90%;
}
li{
display:block;
}
- one
- two
-
- alpha
- beta
- gamma
- three
- four
- five
- six