【HTML/CSS/Javascript】ドロップメニューが隠れてしまった時の打開策

ドロップメニュー(ドロップダウンメニュー)が隠れてしまう・表示されなくなる・下に隠れる、等の打開策と言っても僕の場合ある場所のあるコードが埋め込まれている事に気づかず4,5時間苦戦しただけなんですけどもねｗ
その苦戦したおかげで少しまた新たな知恵がついたことも事実なので色々と復習として更新しようと思います(｡･ω･)
何事も諦めないことが大切なんだな・・・と実感したのでもしこの記事タイトルのようなキーワードで検索して困ってる方が居ましたら参考になるかわかりませんがお助けできたら幸いです(o*｡_｡)oﾍﾟｺｯ

僕の場合ドロップメニューが記事下に隠れてしまいどうしようもなくなってしまったので色々と検索してみました。

その時にみたのはz-index指定だったりposition:relative;を一緒に使ったりみたいなページを見てきましたがその前の大前提に、ドロップメニューを設置している場所が一体どこの面しているのかが重要だったりします。

僕の場合だとこのブログを見て解るようにドロップメニューはヘッダー部分に面しています。
HTMLだと・・・こうなってます。

　<header id="header">
  <hgroup>
  <h1><a href="<%url>"><%blog_name></a></h1>
  <h2><%introduction></h2>
  </hgroup>
<a name="toppage"></a>
  <div id="blog_menu">

<span class="topmenu">
<ul>
  <li><a href="http://blog-imgs-69.fc2.com/b/a/r/barasa88888/201406270634160a4.png"title="定期的に更新してます(｡･ω･)" rel="lightbox">Profile</a>
<ul>
<li><a href="http://barasa88888.blog96.fc2.com/blog-entry-4.html">Profile1</a></li>
<li><a href="http://barasa88888.blog96.fc2.com/blog-entry-7.html">Profile2</a></li>
</ul>
</li>
  <li><a href="#">WoT Link</a>
<ul>
<li><a href="http://barasa88888.blog96.fc2.com/blog-entry-153.html">Link1</a></li>
<li><a href="http://barasa88888.blog96.fc2.com/blog-entry-154.html">Link2</a></li>
</ul>
  </li>
  <li><a href="#">BLOG LIST</a>
<ul>
  <li><a href="http://teinennpirenngougunn.blog.fc2.com/" target="_blank">AnimeReview</a></li>
  <li><a href="http://imadani-oreha-1995.blogspot.jp/" target="_blank">DesignBlog</a></li>
  <li><a href="http://www.dclog.jp/barasa_Euterpe_G/" target="_blank">Decolog</a></li>
</ul>
  </li>
  <li><a href="#">SNS</a>
<ul>
  <li><a href="http://twitter.com/Euterpe_Jay" target="_blank">Twitter</a></li>
  <li><a href="http://plus.google.com/u/0/106891255319838926987/posts"target="_blank">Google+</a></li>
  <li><a href="http://www.facebook.com/rpe.eute" target="_blank">FaceBook</a></li>
  <li><a href="http://www.youtube.com/user/barasa88888" target="_blank">YouTube</a></li>
  <li><a href="http://euterpe888.tumblr.com/" target="_blank">Tumber.</a></li>
  <li><a href="http://profile.hatena.ne.jp/barasa88888/" target="_blank">Hatena</a></li>
</ul>
  </li>
  <li><a href="http://barasa88888.blog96.fc2.com/blog-entry-280.html"target="_blank">Policy</a></li>
  </ul>
  </span>




<br class="clear">

  <right>
<form action="http://barasa88888.blog96.fc2.com/?template=SUP08_21"method="get"class="search">
<input type="image" value="Search" src="http://blog-imgs-36.fc2.com/s/l/u/slugsupper/template_search-trans.png" class="btn">
<input type="text" name="q" maxlength="200" class="txt">
</form>
  </right>

</div>

  </header>

こんな感じに最初と最後にheaderで囲ってますよね。
僕のブログではドロップメニューの固有IDをtopmenuにしてるのでそこも見ていただくと解ると思います。

一体何を言いたいのかと言うと、この親要素となっているheader部分が重要点でheaderのCSSにoverflow:hidden;と指定されてると、headerと指定している範囲を超えると自然と隠れてしまうのです。

これではいくらz-indexやpositionをいじってもoverflow:hiddenがある限り無と化します;・・・。
ついでなのでoverflowはhidden以外にどんな種類があるのかなと調べてみたところ・・・
visible
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
scroll
入りきらない内容はスクロールして見られるようになります。
hidden
はみ出た部分は表示されません。
auto
ブラウザに依存します（一般的にはスクロールして見られるようになります）。

と他に3つ種類がありました(`･ω･´)
そしてheaderのCSSに設定されてたのはhidden・・・。
つまりそういうことでした。

これで一応記事の上に表示されるようになりますが今度は別の問題が発生します。
記事部分までマウスを移動してくとそのまま開いてたドロップメニューが突然隠れてしまいました。

絶望に見舞われた瞬間でしたね。
未来が見えなくなりました・・・。

そう思い込んでいた時、まだ試してないことが一つ。
この調べてみたけど使い道がわからなかったz-indexとposition。

同じheader部分にこのz-index:50;(指定を50に)を埋め込みついでにposition:relative;も指定すると・・・
今のブログトップにあるドロップメニューまでに至るわけです(`･ω･´)

ほんとに原因追求にかなり時間を食わされたのはちょっと目に来ましたが自分のブログが更にワンランクアップしたような気がしました（自分の中で）

関連記事

低すぺっく-Blog改

［マビノギ日記/他+］ジャイ娘は美人さんです…。異論は認めません!

【HTML/CSS/Javascript】ドロップメニューが隠れてしまった時の打開策