html iframeの要素をはみ出して表示させる方法

実現したいこと

ifameで差し込んだページの一部をiframeタグで指定した値からはみ出して表示したい。

前提

WEB系のコードは初心者なので、質問の仕方が悪かったらすみません。

下の図のようにヘッダー①②があり、①のみスクロールしても動かないように固定しています。
ヘッダー①②をiframeにしているのは別のページでもヘッダー部分を使用したいためです。

ヘッダー①の一部にulタグでマウスカーソルを重ねると、表示されるメニューを付けました。

発生している問題・エラーメッセージ

iframeタグの高さ分しか画面上には表示されない為、ヘッダー①の高さのみをiframeの高さに設定したときに、メニューが切れてしまう。

該当のソースコード

index.html

html

1<div id="header_1">2 <iframe id="h_1" src="header_1.html" frameborder="0" scrolling="NO" width="100%" height="210px"></iframe>3 </div>4 <div id="header_2">5 <iframe src="header_2.html" frameborder="0" scrolling="NO" width="100%" height="650px"></iframe>6 </div>7 8 <div id="main">その他要素</div>

css

1#header_1{2 position: -webkit-sticky;3 position: sticky;4 top: 0px;5 text-align: center;6 z-index: 100;7}

header_1.html

html

1<div id="header_navi">2 <ul id=head_tab>3 <li class="header_navi_lst">4 <a href="" target="_parent"><span class="span1">Menu</span><br><span class="span28"></span></a>5 <div class="sub_menu">6 <div class="sub_index">7 <p><a href="" target="_top">A</a></p>8 <p><a href="" target="_top">B</a></p>9 <p><a href="" target="_top">C</a></p>10 </div>11 </div>12 </div>13 </div>14 </div>

css

1.sub_menu{2 visibility: hidden;3 opacity: 0;4 transition: all 0.3s;5}6.header_navi_lst:hover > .sub_menu {7 visibility: visible;8 opacity: 0.8;9 z-index: 100;10}

試したこと

iframeのheightの数値を大きくして、メニューの要素が表示されるように設定しましたが、ヘッダー①をスクロール固定でおいておくために#h_1のz-indexの値を他より高く設定したため、iframeの高さ分ヘッダー②以下の要素がクリックできなくなってしまいました。