CSSだけで、hoverした時やクリックしたときに、サブブロックやリストを表示するための基本について、わかりやすく解説します
hover時にメニューを開く
WordPressのメインメニューなどで頻繁に使われる兄弟セレクタを使って表示非表示のコントロールをします。
transition:visibility 1s は、なくても動作しますが、マウスを外しても1秒間は表示できるようにする（visibility特有の動作です）ことで、チラつきを抑制する目的で使用しています。
hover me!
HTML
<div class="hover-drawing-container"> <span class="sibling-hover-draw">hover me!</span> <ul class="drawing-content"> <li><a href="http://www.tenman.info/">www.tenman.info</a></li> <li><a href="http://www.tenman.info/labo/css/">CSS note</a></li> </ul> </div>
CSS
.hover-drawing-container {
width:300px }
.hover-drawing-container .drawing-content {
visibility:hidden;
transition:visibility 1s }
.hover-drawing-container .sibling-hover-draw {
visibility:visible;
padding:.5em;
font-weight:700 }
.hover-drawing-container .sibling-hover-draw,.hover-drawing-container .drawing-content {
display:block;
box-sizing:border-box;
position:static;
margin-top:0 }
.hover-drawing-container .drawing-content {
position:static;
padding-top:1em }
.hover-drawing-container:hover .drawing-content {
visibility:visible }
.hover-drawing-container .sibling-hover-draw,.hover-drawing-container .drawing-content {
border:1px solid #ccc;
width:300px;
max-width:none }
.hover-drawing-container .drawing-content {
border-top:none }
クリックした時にメニューを開く
div要素でォーカスできるように、tabindex="0"を使用しています。
transition:visibility 1s は、edgeを除くIE11,10での動作確保のため必要です。IE9以下は動作しません。オールドブラウザの動作が必要な場合は、checkbox等での処理を検討してください。
HTML
<div class="click-drawing-container" tabindex="0"> <ul class="drawing-content"> <li><a href="http://www.tenman.info/">www.tenman.info</a></li> <li><a href="http://www.tenman.info/labo/css/">CSS note</a></li> </ul> </div>
CSS
.click-drawing-container {
outline:none }
.click-drawing-container:before {
content:"click me!";
outline:none;
display:block;
padding:.5em;
box-sizing:border-box;
font-weight:700 }
.click-drawing-container:active .drawing-content,.click-drawing-container:focus .drawing-content {
visibility:visible;
outline:none }
.click-drawing-container .drawing-content {
z-index:1;
padding-top:1em;
visibility:hidden;
position:static;
margin-top:0 }
.click-drawing-container .drawing-content,.click-drawing-container:before {
border:1px solid #ccc;
width:300px;
max-width:none }
.click-drawing-container .drawing-content {
border-top:none;
transition:visibility 1s}