• 文字サイズ


解決済

PC用メニューにドロップダウンを追加したい

  • 相談者:非公開
  • 2020/12/08 10:27
いつもお世話になっております。

PC用表示のヘッダーメニューの『商品の一覧』をマウスオーバーで
ドロップダウンさせて一覧を表示させたいのですが、
スマホ用メニューで記載しているl-gnav_childを使ってできないかと
思ったのですが、うまくできませんでした。

こちらのページを参考にしつつ
https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/
PC表示用のCSSをいじってみたのですが、うまくl-gnav_childが
反映されません。
l-gnav_childを併用するよりか、新しくドロップダウン用の
子メニューを作成したほうが良いのでしょうか。
ご教示の程よろしくお願いします。
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも!?
2020年は4月から毎週オンラインにて開催し、1900社が参加された90分で学べる楽天集客対策セミナーですが、アップデートをして2021年も開催いたします。

  • 返信者:非公開
  • 2020/12/08 17:28
ECマスターズの田中です。

PC用表示にて
.l-gnav_child に display: none; が設定されているため、
visibiltyや………(省略)………
  • 返信者:非公開(質問者)
  • 2020/12/09 10:55
ご回答ありがとうございます。
PC用に.l-gnav_childを作成してdisplayプロパティから
visibilityプロパティに変更しました。
レ………(省略)………
  • 返信者:非公開
  • 2020/12/09 11:17
ECマスターズの田中です。

ページで読み込んでいるstyle.cssの417行目、
.l-gnav_child に対する「display: none;」………(省略)………
  • 返信者:非公開(質問者)
  • 2020/12/09 14:36
ご回答ありがとうございます。
display: none;をvisibilityに変更しましたら、
ドロップダウンが正常に動きました!
ただ、その時にスマ………(省略)………
  • 返信者:非公開
  • 2020/12/09 15:55
ECマスターズの田中です。

visibilityによる非表示処理は、
ご覧いただいたとおり、非表示にした箇所が
空白として空いてしまいます。

下………(省略)………