グローバルメニューの折り畳みを表示時に隙間ができる。

Question

グローバルメニューの折り畳みを作ったのですが、PC画面で表示する際は問題ないのですが、スマホサイズで表示すると折り畳みがバーから離れて表示されてしまいます。レスポンシブの設定がおかしいと考えていろいろいじっていますが、解決方法が分からず。助言頂きたいです。

---html---

<div class ="background">
<ul class="menu">
    <li><a href="../index.html">ホーム</a></li>
    <li class="menu__single">
        
        <a href="#" class="init-bottom">生活</a>
        <ul class="menu__second-level">
            <li><a href="#">仕事</a></li>
            <li><a href="#">生活情報</a></li>
            <li><a href="#">食生活</a></li>
            <li><a href="#">観光情報</a></li>
            <li><a href="#">子育て</a></li>
            <li><a href="#">健康</a></li>
        </ul>
    </li>
    <li class="menu__single">
        <a href="#" class="init-bottom">勉強</a>
        <ul class="menu__second-level">
            <li><a href="#">----</a></li>
            <li><a href="#">----</a></li>
            <li><a href="#">----</a></li>
            <li><a href="#">----</a></li>
        </ul>
    </li>
    <li class="menu__single">
        <a href="#" class="init-bottom">趣味</a>
        <ul class="menu__second-level">
            <li><a href="#"></a></li>
            <li><a href="#">----</a></li>
            <li><a href="#">----</a></li>
            <li><a href="#">----</a></li>
        </ul>
    </li>
    <li class="menu__single">
        <a href="#" class="init-bottom">サイト情報</a>
        <ul class="menu__second-level">
            <li><a href="#">----</a></li>
            <li><a href="#">----</a></li>
            <li><a href="#">----</a></li>
            <li><a href="#">----</a></li>
        </ul>
    </li>
</ul>
</div>

--- CSS --------

.menu {
  position: relative;
  width: 100%;
  height: 60px;
  max-width: 1170px;
  margin: 0 auto;
  background: black;
  padding: 0;
}

.menu>li {
  font-size: 18px;
  float: left;
  width: 20%;
  /* グローバルナビ5つの場合 */
  height: 60px;
  line-height: 60px;
  background: black;
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
}


.menu>li a {
  display: block;
  color: #fff;
}

.menu>li a:hover {
  color: #999;
}

ul.menu__second-level {
  visibility: hidden;
  opacity: 0;

}


.menu>li:hover {
  background: #072A24;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.menu__second-level li {
  border-top: 1px solid #111;


}


.menu__second-level li a:hover {
  background: #111;
}

.menu__third-level li a:hover {
  background: #2a1f1f;
}

.menu__fourth-level li a:hover {
  background: #1d0f0f;
}


/* 下矢印 */

.init-bottom:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 0 15px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* floatクリア */
.menu:before,
.menu:after {
  content: " ";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  *zoom: 1;
}

.menu>li.menu__single {
  position: relative;
}

li.menu__single ul.menu__second-level {
  position: absolute;
  top: 40px;
  width: 100%;
  padding: 0;
  list-style-type: none;
  background: #072A24;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  z-index: 100
}


li.menu__single:hover ul.menu__second-level {
  top: 50px;
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 480px) { 

  .menu {
    height: 30px;
  }

  .menu > li {
    font-size: 9px;
    height: 30px;
    line-height: 30px;
    text-align: center;
   }

  .menu__second-level li {
font-size: 9px;
   }


.menu__fourth-level li a:hover {
  background: #1d0f0f;
}

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[kei344]

https://jsfiddle.net/mqbarx2e/ 問題が再現しませんでした。他のCSSなどが影響していませんか？また、提示されたものだけではメニューが開きませんでした。

[ft_ft]

見て頂いてありがとうございます！！！
CSSのコードが足りていませんでしたので、追加修正しました。
通常サイズでは、問題がでないのですが、スマホサイズにしたら表示がずれてしまいます。
何かが影響していることは確かなのですが、原因が特定できず、相談している次第です。
Inline heightが怪しそうなので、いろいろいじってはいるのですが、なかなか難しく。。

[kei344]

回答修正しました。

Answer 1

動くサンプル：https://jsfiddle.net/u2zyvdxa/

---

修正分について反映させましたが、問題は再現しませんでした。

問題が起こるHTMLの当該箇所を質問文に書いたコードと差し替えて問題が再現するなら、
別のCSS（JavaScriptやHTML構文）の影響を調査しましょう。
問題が起こらないなら、当該箇所のHTMLに不可視文字（全角空白や制御コード等）がまぎれている可能性があるので、少しずつ削除して調査してみてください。

---

追記：

スマホサイズね。再現しました。

li.menu__single:hover ul.menu__second-level {
    top: 30px; /* ヘッダの高さにあわせる */
    /* 略 */
}

Comments

[ft_ft]

ありがとうございます！
問題解決しました！！！

コピペサイトから拾ってきて、まったく理解せずに使っていたので、まったく見当違いところを見ていました。Topも勉強します。

[kei344]

デベロッパーツール使えばどこが問題か比較的簡単にわかりますよ。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

[ft_ft]

ありがとうございます！
もう少し自分でも掘り下げられるように頑張ってみます！