当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【サンプルデモ】スマホ対応CSSだけでドロップダウンメニュー - Webデザインラボ

【サンプルデモ】スマホ対応CSSだけでドロップダウンメニュー(横スクロール・スクロールバー表示)

通常の横並びドロップダウンメニューです。メニュー部分にマウスオーバーするとコンテンツの上に子メニューが展開します。

スマホサイトでは横スクロールのナビゲーションとなり、子メニューは展開しません。

メニュー数が多かったりメニューの文字列の数が多いデザイン向けです。

メニューの一部が表示されなくなるのでHTMLのリンク構造をスマホサイトとPCサイトで変える必要があります。

PCサイトの子孫メニューの制御ははoverflowで行っております。displayでの制御も可能ですが、その場合はcontentプロパティで表示している▶矢印は見えなくなります。