¿Qué estoy tratando de hacer?

1. Tengo un menú personalizado en mi aplicación con algunas opciones (digamos 8 opciones)
2. Basado en alguna lógica, necesito deshabilitar algunas opciones en el menú (digamos las últimas 4 opciones)
3. Si el usuario se desplaza sobre cualquier opción deshabilitada, debo mostrar una ventana emergente que explique por qué se deshabilitó la opción

Tema :

• Dado que la cantidad de opciones en el menú no se conoce de antemano, el menú debe ser desplazable para acomodar más opciones (si es necesario)
• Sin embargo, la ventana emergente al pasar el mouse sobre una opción deshabilitada debería desbordar los límites del menú (si es necesario)
• Básicamente, esto se reduce a tener overflow-x: visible y overflow-y: auto , lo cual no es posible según las especificaciones.
• Algunas de las publicaciones a las que me referí usan posicionamiento absoluto para solucionar este problema, pero eso no parece ayudar aquí.

Referencias :

1. ¿Cómo habilito el desplazamiento solo en una dirección en CSS?
2. Salir del desbordamiento: oculto
3. Desbordamiento de CSS-x: visible; y desbordamiento-y: oculto; causando problema con la barra de desplazamiento

Traté de crear mi menú personalizado ficticio que reproduce el problema: https://codepen.io/adiltan/pen/BaJJzOb

Intenté usar el posicionamiento absoluto pero no pude hacerlo funcionar