Using expand/collapse

Hi all, thanks in advance to anyone who can offer help!
Wanting to create a more dynamic menu system containing images etc - i have employed the use of expand/collapse within the mousein/mouseout function as such:

export function button5_mouseIn(event, $w) {
export function button5_mouseOut(event, $w) {
export function box4_mouseIn(event, $w) {
export function box4_mouseOut(event, $w) {

This works great and I simply repeat this code for each button in my custom menu which is in a fixed header.

My problem is this: The container box that this code opens will only show on one particular place on the screen ie: where I place it under the button that calls it. BUT - when I scroll down the website and then roller over a button in my custom menu the container box is hidden at the top of the page that I have since scrolled down from.

Is there a way to get that container box to show directly under the button on mousein regardless of where I am currently scrolled on the website?

OR: can I show/hide a lightbox using the mousein/mouseout function? If that is possible then the use of lightboxes would fix my issue as the lightbox would appear regardless of page scrolling.

Thanks again to anyone who can help!

Best regards,
Steve Pirsich

Hi all - I found the solution:

Pin to screen.

wow. it was that simple.

I just had to pin the container boxes to the screen.

So Happy!!!