0

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

Bart F. W.
  • 19
  • 2
  • 2
    Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D May 20 '18 at 08:00
  • 1
    Ok thanks, I understand the downvote... (Not the one of the correct reply though.) I think there is enough information now (in my question and in the correct answer) for future readers, so it has become obsolete to still add more code. I'll do better at my 2nd question ;). – Bart F. W. May 20 '18 at 11:22
  • editing questions afterwards to meet feedback ist good for future references. – Thomas Fellinger May 25 '18 at 09:35

1 Answers1

-1

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.

Thomas Fellinger
  • 646
  • 3
  • 19
  • Thanks for your help! For the moment I added the line document.getElementById("main").style.overflow = "visible"; to the page with the menu, so that it is solved for now and it doesn't interfere with the admin pages. – Bart F. W. May 20 '18 at 10:26