HTML,CSSの参考になれば

公開日:2016/07/06 更新日:2020/02/24

マウスを載せると階層化された子要素がプルダウン形式で表示させます。

【CSS】:hover疑似クラスで指定要素とは別の要素にスタイルを適用する

親要素がホバーされた時に子要素に変化を付ける方法

#parent:hover > #child{
color:white;
}

参考HTML

<ul id="nav">
 <li>メニュー</li>
 <ul id="sab-nav">
  <li>サブメニュー</li>
 </ul>
</ul>
#nav li:hover > #sub-nav {
 display:block;
}

かなり省略しているが、#sub-navは元はdisplay:block;をつけている状態です。

またこれだけでは、表示されたサブナビがその他のブロックに干渉するので絶対表示などを行いそれを避ける必要がある。

上杉 洋

1991年生まれ。株式会社ステップバイワーク代表。2013年からホームページ制作の業界に入り、以後フリーランスを経て2022年に起業。 独自の理論で費用対効果の高いホームページを作るため日々精進しています。