On my website I built a page with links: https://weerpagina.warnez.com/links/ Everything went fine until I added submenu's (see for example 'webcams'), when you hover over a menu item, then the submenu is shown, but a part is hidden behind the footer. The structure (with z-indexes, only on my dev-environment) is as follows:
<div id="wrapper"> --> z-index:1;
<header>...</header> --> z-index:100;
<div id="main">...</div> --> z-index:50
<footer>...</footer> --> z-index: 1
</div>Still the submenu (from "main") is hidden behind the footer.
I tried to add to the "main", 'overflow:visible' and that worked, except it had the consequence that some tables in my admin area overflowed in the X-direction, an unwanted behaviour. Then I tried overflow-x:scroll and overflow-y:visible, but apparently when you make overflow-y:visible, the overflow-x is automatically auto. So that doesn't work too. (see overflow-y:visible not working when overflow-x:hidden is present). Anyway, I prefer to solve it via z-index.
Any help is greatly appreciated!
Kind regards,
Bart
I think that "#main" has "overflow:auto" and that keeps the menus inside.
You should overlook the admin area or you could apply some global classname at the "body" to distinguish between admin and frontend.
Then keep the overflow setting for admin pages and make #main overflow:visible at the frontend.