デスクトップ表示でナビゲーションのサブメニューが初期状態で展開されてしまう問題の解決方法（HTML/CSS）
デスクトップ表示でナビゲーションのサブメニューが初期状態で展開されてしまう問題の解決方法（HTML/CSS）
ウェブサイトのナビゲーションメニューで、デスクトップやラップトップの画面（ChromeやFirefoxなど）で初回読み込み時にサブメニューが完全に展開されてしまうUIの問題に直面しています。これにより、意図したナビゲーションレイアウトが崩れます。以下にわかりやすくスクリーンショットを添付しました。
サイトを開くと、「Comparison」と「Blog」のサブメニューがデフォルトで既に展開され、すべての項目が表示されています。ページをリフレッシュしたり、ウィンドウサイズを変更したり、他の場所をクリックした後にのみ正常に戻ります。この問題はモバイルビューでは発生せず、デスクトップサイズの画面でのみ起こります。
環境
- HTML5 + CSS3
- JavaScriptを少量使用
- Bootstrap、React、jQueryなどのフレームワークは使用していません
- ブラウザ検証: Chrome（PC）、Firefox（PC）、Edge（PC）
出ているエラーメッセージを入力
要望
ページ読み込み時にサブメニューはデフォルトで折りたたまれた状態を維持してほしいです。ユーザーがメニューボタンにホバーまたはクリックした場合のみ展開されるようにしたいです。モバイル表示やユーザー操作後の動作と同様に。
### 試したこと
- .submenuクラスにdisplay: noneを適用
- 非アクティブ状態にvisibility: hiddenを追加
- メニューのロジックをDOMContentLoadedでラップ
- デフォルトスタイルを削除してJSトグルを再適用
- @mediaクエリで異なる挙動を強制
-
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
サンプルマークアップ（簡略版）
html<br><ul class="menu"><br> <li class="dropdown"><br> <a href="#">ブログ</a><br> <ul class="submenu"><br> <li><a href="#">Instanderの代替</a></li><br> <li><a href="#">Instander APKは安全ですか？</a></li><br> </ul><br> </li><br></ul><br>
css<br>.submenu {<br> display: none;<br>}<br>.dropdown:hover .submenu {<br> display: block;<br>}<br>
サブメニューが、DOMが完全に準備される前にCSSが適用されてしまい、デフォルトで開いた状態で読み込まれてしまっている可能性があります。
参考にした記事
https://stackoverflow.com/questions/35110393/how-to-hide-submenu-by-default-css
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
- Qiita ナビゲーションのトラブルシューティング
お願い
ページ初回読み込み時に、特にデスクトップビューでサブメニューが折りたたまれた状態になるようにする方法を、純粋なHTML/CSS（必要なら最小限のJS）で教えていただけますか？
ここに問題・エラーに対して試したことを記載してください。
参考サイト: https://iinstanderapk.com/
