質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

Q&A

解決済

1回答

943閲覧

メニューの下に画像が入り込んでしまう

yomopon

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

0グッド

0クリップ

投稿2020/11/04 04:22

編集2020/11/04 04:30

前提・実現したいこと

各htmlページのheader部分にmenuを読み込んで表示させています。
メニュー(header)を固定して、その下から各ページのコンテンツが表示されるようにしたいです。

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

メニューをドロップダウンメニューに変更したところ、各ページのトップがメニューの下に入り込んでしまいました。

該当のソースコード

html

1<div id="top"> 2 <div id="logo"> 3 <a href="xxx.html"><img src="img/ロゴ.jpg"></a> 4 </div> 5 6 <nav> 7 <ul class="menu"> 8 <li><a href="1.html">メニュー1</a> 9 <ul> 10 <li><a href="1-1.html">子メニュー1-1</a></li> 11 <li><a href="1-2.html">子メニュー1-2</a></li> 12 <li><a href="1-3.html">子メニュー1-3</a></li> 13 </ul> 14 </li> 15 <li><a href="2.html">メニュー2</a> 16 <ul> 17 <li><a href="2-1.html">子メニュー2-1</a></li> 18 <li><a href="2-2.html">子メニュー2-2</a></li> 19 <li><a href="2-3.html">子メニュー2-3</a></li> 20 </ul> 21 </li> 22 <li><a href="3.html">メニュー3</a></li> 23 <li><span><a href="4.html">メニュー4</a></span></li> 24 </ul> 25 </nav> 26 27</div>

css

1.menu { 2 float: right; 3 list-style: none; 4 margin: 0; 5 padding: 0; 6} 7 8.menu::after { 9 content: ""; 10 display: block; 11 clear: both; 12} 13 14.menu li { 15 width: auto; 16 float: left; 17 text-align: center; 18 list-style-type: none; 19 position: relative; 20 } 21 22.menu li a { 23 margin: 0; 24 padding: 20px; 25 font-size: 13pt; 26 text-decoration: none; 27 line-height: 1; 28 display: block; 29} 30 31.menu li span a:link { 32 background-color: gray; 33 color: #000; 34 } 35 36.menu li a:hover { 37 background-color: red; 38 color: #000; 39} 40 41.menu li ul { 42 list-style: none; 43 top: 100%; 44 left: 0; 45 margin: 0; 46 padding: 0; 47 position: absolute; 48} 49 50.menu li ul li { 51 overflow: hidden; 52 width: 250%; 53 height: 0; 54 -moz-transition: .2s; 55 -webkit-transition: .2s; 56 -o-transition: .2s; 57 -ms-transition: .2s; 58 transition: .2s; 59} 60 61.menu li ul li a { 62 padding: 13px 15px; 63 text-align: center; 64 font-size: 12pt; 65} 66 67.menu li:hover ul li { 68 overflow: visible; 69 height: 38px; 70}

試したこと

html内での読み込みのあとに、あらかじめmargin-topを追加してみた

<script type="text/javascript"> $(function(){ $('#header').load('/menu.html'); }) $(function() { var height=$("#header").height(); $("body").css("margin-top", height + 50); }); ドロップダウンメニューが隠れるという投稿があり(当方ではドロップダウンメニューにより画像が隠れる)、 z-index:1; を追加してみましたが、やはり変わりませんでした。 ### 補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

float でメニューリストを横並びにしているで、floatを適切な要素でクリアする必要があります。

css

1.menu::after { 2 content: ""; 3 display: block; 4 clear: both; 5}

上記でクリアしているつもりでしょうが、もっと上の階層でする必要がありますね。
上記を下記に修正してみてください。

css

1#top::after { 2 content: ""; 3 display: block; 4 clear: both; 5}

float で横並びする方法は既に自体遅れの手法です。
Felxboxで横並びにすればこのようなことを気にせずに横並びにできます。

Flexboxでの実装例。
floatのクリアは不要です。

css

1.menu { 2 display: flex; /* 横並び */ 3 justify-content: flex-end; /* 右寄せ */ 4 /*float: right;*/ 5 list-style: none; 6 margin: 0; 7 padding: 0; 8} 9 10.menu li { 11 width: auto; 12/* float: left;*/ 13 text-align: center; 14 list-style-type: none; 15 position: relative; 16 }

投稿2020/11/04 05:13

編集2020/11/04 06:09
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問