hoverで子メニューが表示されるサイドバーメニュー

※ Resultを0.25xにしてご覧ください。

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をかけておく。