※ Resultを0.25xにしてご覧ください。
See the Pen hoverで子メニューがでてくるサイドバー by 熊瀬川直也 (@momonoki1990) on CodePen.
-
liの中に、親要素(a.parent)と子要素(ul.child)を並列させる。 - 子要素(
ul.child)はdisplay:noneで消しておく - 親要素と子要素をまとめる
liに対して:hoverをかけ、子要素(ul.child)をdisplay: blockで表示させる。 - 親要素(
a.parent)に対して:hoverをかけても、子要素(ul.child)は親要素(a.parent)に内包されていないので、子要素(ul.child)にカーソルを合わせている時に、子要素(ul.child)が消えてしまう。 - 親要素(
a.parent)はdisplay: blockで広げておく - 子要素(
ul.child)は、z-index: 9999;→浮かせる、white-space: nowrap;→折り返させない、box-shadow: 0 2px 8px rgba(77, 77, 77, 0.2);→浮いているように見せる -
liの高さはaタグに対して上下paddingをかけて押し広げる(リンクの選択範囲がliの高さいっぱいまで広がる) - 親要素と子要素をまとめる
liにposition: relativeをかけて、子要素(ul.child)やspan.chevronにposition: absolute;をかけることで、子要素(ul.child)やspan.chevronの位置を定める。 -
ulはlist-style: noneをかけておく。