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

前提・実現したいこと

各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を追加してみた

行動規範の内容に同意します

回答1件

ベストアンサー

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  }