• 文字サイズ
  • 小
  • 中
  • 大


解決済

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を併用するよりか、新しくドロップダウン用の
子メニューを作成したほうが良いのでしょうか。
ご教示の程よろしくお願いします。
キーワード：CSS、WEBデザイン、マウスオーバー、エフェクト
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
セミナー詳細はこちら
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
ご視聴はこちら

  • 返信者：非公開
  • 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による非表示処理は、
ご覧いただいたとおり、非表示にした箇所が
空白として空いてしまいます。

下………（省略）………
続きを読む
このフォーラムへの質問は終了しました
質問を検索する
返信も検索対象にする

カテゴリーから探す