Page 1 of 1

[SOLVED] <iframe> Drop-down Menu Covers Content

Posted: Sun Apr 04, 2021 10:44 pm
by paulp575
I am developing a website for a non-profit. Unfortunately I'm the only one that knows HTML, web hosting. etc,

I have developed the pages using HTML5, but ran across a problem using <iframe> to contain the menu for all the pages.

Here's the situation:

1. Put the same menu on all the pages. Unfortunately if the menu changes then I have to update all the pages (quite laborsome!).

2. While thinking about a better way, I came across the <iframe> tag. Thinking this would work. Well, it does - to some extent. One of the menu items has a drop-down menu. When you click on that item, the drop-down is hidden behind the content on that page. I could easily solve it by having a large HEIGHT in the menu CSS, but that leaves an ugly black space between the menu and the content. I looked up using the z-index tag/attribute, but it appears that only works with position content; not iframe.

Any suggestion on how to accomplish this and keep it simple so someone later can understand what I did?

I've attached a ZIP file with the files needs to help you hopefully solve this problem


Re: <iframe> Drop-down Menu Covers Content

Posted: Tue Apr 06, 2021 10:31 am
by Albert Wiersch

For security reasons I don't think there is a way for an iframe to overflow its own content area.

Do you have access to PHP? That's what I use to easily include common menus, headers, and footers on the pages at You can do this using the include(), include_once(), require(), and/or require_once() function: ... ctures.php

Another old-fashioned solution would be to use the template tool. This was one of the first 'tools' in CSS HTML Validator over 20 years ago which let you update common parts of pages without needing server side includes, PHP, or any server processing. If you think you might want to use it then please see: ... amples.htm

I hope this helps.

Re: <iframe> Drop-down Menu Covers Content

Posted: Thu Apr 08, 2021 4:57 pm
by paulp575
In order to keep it simple. I'll leave it as it is - with the large blank space between the menu and the page content.

Thanks for the suggestions to use wither PHP or templates.