スマホ版メガドロップダウンメニューのCSS設定

Question

レスポンシブ表示の時に、
ロゴ　メール　電話　メニュー
という４つの均等割付けした画面上部に固定されるバーを作り、
一番右のメニューを押した時にだけ
画面の幅で下に広がるメガドロップダウンにしたいです。
（本当はページ下部に固定して上に広げたいけど難しそうなので諦めました）

ですが、現状のコードでは、メニューにカーソルを合わせても
ul.child2の細い幅に合わせてしか下に広がってくれません。
画面幅に合わせて広げるにはどうすれば良いでしょうか？

<div id="sp_nav" class="sp_only">
	<ul id="menu2">
    	<li>ロゴ</li>
        <li>メール</li>
        <li>電話</li>
        <li>メニュー
        	<ul class="child2">
            <li><a href="#">メニュー１</a></li>
            <li><a href="#">メニュー2</a></li>
            <li><a href="#">メニュー3</a></li>
            <li><a href="#">メニュー4</a></li>
            <li><a href="#">メニュー5</a></li>
            <li><a href="#">メニュー6</a></li>
            </ul>
        </li>
    </ul>
</div>

#sp_nav{
	position:fixed;
	top:0;
	left:0;
	margin:0;
	width:100%;
}

#sp_nav ul#menu2{
	display:flex;
	justify-content:space-between;
	background-color:#000;
	height:70px;
}

#sp_nav ul#menu2 li{
    position: relative;
    display: block;
}
#sp_nav ul#menu2 li ul.child2{
	display:none;
	  position:absolute;
	  top:60px;
	  left:0;
	  width:100%;
	margin:0 auto;
}
#sp_nav ul#menu2 li ul.child2 li{
	background: #000;
	width:1000px;
	height:30px;
	text-align:center;
}
#sp_nav ul#menu2 li ul.child2{
	width:100%;	
}
#sp_nav ul#menu2 li ul.child2 li a{
	width:100%;
    padding: 5px 10px;
    display: block;
    color: #fff;
}

#sp_nav ul#menu2 li:hover ul.child2 {
    top: 70px;
    visibility: visible;
    opacity: 1;
}

#sp_nav ul#menu2 li ul.child2 > li {
	width:100%;
}

<script>
$(function(){
    $('#menu2 li').hover(function(){
        $("ul:not(:animated)", this).slideDown();
    }, function(){
        $("ul.child2",this).slideUp();
    });
});
</script>

Comments

[m.ts10806]

何か参考にしたページはありますか？

[yamada875]

最初PC表示ように普通のドロップダウンメニューを使うため
https://makasete-web.net/dropdown-menu
このサイトを参考にし、javascriptを使用しました。
その後、スマホ用はメガにしたいと思って
https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/
を参考にしたのですが、参考になっているのかは謎です。

[m.ts10806]

ザッとみた印象ですがいずれもドロップダウンにしか対応していないので、
結構改修が必要そうに思います。display:none;を解除して調整は試みていますが、「子要素」という時点で結構縛りがあって、一筋縄ではいかないというか。
幅がきいてるのはwidth:100%だとかpostion:absolute;なんですけど。

Answer 1

Yousuck様のご回答通りに入力すると、
PCで検証するとマウスをulに載せてないとメニューが一瞬で閉じてしまい頭を抱えましたが、
スマホで見たら普通にメニューが開け、瞬時に閉じることもなく、押すことが出来ました！！
Yousuck様にベストアンサーをしたのですが、
最初に諦めようと思ってこの「自己解決の回答」に「諦めます」と入力してしまったためこの回答欄がありますが
もし見る方がいらっしゃったらそのままベストアンサーを見てください。

Comments

[m.ts10806]

申し訳ないですが、本質問内容に対してこの回答内容は「不適切」と言えます。
「やり直しました」という割りに具体的な解決方法が何も書かれていません。

「無理だった」というのは質問者さんの技術の範囲では難しかったというだけで実は近いところまで来ていたかもしれませんよ（少なくとも私にはそういう印象です）
毎回コピペで使えるコードばかり追い求めていたらいずれやりたいことが何も実現できなくなります。
ご注意ください。

[m.ts10806]

なお、質問も回答も編集できます。
きちんと解決方法を追記された方が良いでしょう（このままでいくのでしたら低評価つけたままにしておきます。誰のためにもならないので）

[yamada875]

ごめんなさい、今やり直したらできました。
最後まで追求する様に励ましてくれてありがとうございます。

[m.ts10806]

私も質問をしたことがないので正しいやり方は知らないですが、
「取り消す」か何かできるようです。
つまり
ベストアンサー取り消す→解決済みが受付中となる→対象の回答をベストアンサーに
という流れかなと。

[yamada875]

出来ました！なんでもかんでも質問して申し訳ないです。ありがとうございます。

[m.ts10806]

> できました、ベストアンサーをやり直したいです。

回答をこのように編集するのはあまり良くないです。
運営への削除依頼が受け入れられそうな内容でもないですし、
「他を参考にした」のならそのURLを記載だけしておき、
ベストアンサーを取り消されてはいかがでしょうか。

[yamada875]

自分の回答の消せないので、書き換えました。

Answer 2

CSSを修正してみました。
※追加・削除した箇所にコメント

■再現環境
JSFiddel
jQuery3.3.1

#sp_nav{
    position:fixed;
    top:0;
    left:0;
    margin:0;
    width:100%;
}

#sp_nav ul#menu2{
    display:flex;
    justify-content:space-between;
    background-color:#000;
    height:70px;
    padding:0;/* 追加 */
}

#sp_nav ul#menu2 li{
    /*position: relative; 削除 */
    display: block;
    color:#fff;
}
#sp_nav ul#menu2 li ul.child2{
    display:none;
      position:absolute;
      top:60px;
      left:0;
      width:100%;
    margin:0 auto;
    padding:0;/* 追加 */
}
#sp_nav ul#menu2 li ul.child2 li{
    background: #000;
    width:1000px;
    height:30px;
    text-align:center;
}
#sp_nav ul#menu2 li ul.child2{
    width:100%;    
}
#sp_nav ul#menu2 li ul.child2 li a{
    width:100%;
    padding: 5px 10px;
    display: block;
    color: #fff;
}

#sp_nav ul#menu2 li:hover ul.child2 {
    top: 70px;
    visibility: visible;
    opacity: 1;
}

#sp_nav ul#menu2 li ul.child2 > li {
    width:100%;
}

Comments

[yamada875]

この通りに修正したら実現出来ました！本当にありがとうございます！
paddingが邪魔していたのと、
#sp_nav ul#menu2 li ul.child2に入れているposition:absoluteの基準にするところを間違えていたということでしょうか？

[Yousuck]

お察しの通りです！
うまくいって何よりです～

[yamada875]

ごめんなさい、今もう一度やってみたら、
ドロップダウンにカーソルを合わせると、
クリックできずに一瞬で閉じてしまいます！！
メニュー上にカーソルがないとドロップダウンが閉じてしまう仕様になっていました・・・

[Yousuck]

jsの記述で、イベントがhoverなのでそうなるかと。。

[yamada875]

あぁぁなるほど…
一番右（ul.child2の幅の下）カーソルが有るとき以外はメニューが閉じてしまいます…
これこのjsでは実現できないってことですかね、、（；；）

[Yousuck]

クリックとかの話ですか？

[m.ts10806]

スマホ(というかタッチデバイス)に[hover]って概念ないですしね。

[yamada875]

そうなんですね。すいません、もうこれでは無理そうなので１からやり直すことにします・・・！
考えてくださってありがとうございます。

[m.ts10806]

試してないですが、トリガーをclickに切り替えて調整すればできそうには思います。

[yamada875]

申し訳ないです。
PCで検証するとマウスを載せてないとメニューが開きませんでしたが、
特にjavascriptなどを書き換えずとも、
スマホで見たらちゃんとメニューが開け、瞬時に閉じることもなく、押すことが出来ました！！

[Yousuck]

スマホの場合、jsのイベントを修正（touchstartなどに）しないといけません。
コメントにございます、
> スマホで見たらちゃんとメニューが開け、瞬時に閉じることもなく、押すことが出来ました！！
は、スマホ（タッチデバイス）にhoverの概念がなく、タップした際にたまたま.hoverが作動し擬似要素の:animatedが付与されたままとなり、それが質問者さまのイメージする動作と合っただけだと思われます。