マウスオーバーを使ったメニューはCSS2の頃からよく見かけたが、クリックで開け閉めできるものは見かけないので書いてみる。IE9以上で動作可能。

実際の[プレビュー](http://jsbin.com/kiziru/2/ "jsbin")と[コード](http://jsbin.com/kiziru/2/edit?html,css,output "jsbin")。

ポイントはチェックボックスを使っての状態判別。チェックボックスがオンになっていたらリストを表示する。

## 疑似セレクタについて

`.dropInput:checked ~ .menu {…}`の「E ~ F」は間接セレクタと言い、E要素が前方にあるFにのみスタイルを適用する。ここでは直前のチェックボックスがONになっているときのulの状態を表すときに利用している。

注意点は、スマホではinput自体を非表示にするとそのフィールドが無効になるみたいなので、上記のコードだと動作しない模様。スマホに対応させるにはinputはdisplayで非表示にせず、absoluteとz-indexを使いラベルの背面に設置をすれば動くみたいです。

### 更に簡単な方法

【追記】もっと[簡単な方法](http://output.jsbin.com/defirizoqe)があった。

```html
<label for="toggle" onclick=""  for="menuToggle">menu</label>  
<input type="checkbox" id="toggle" autocomplete="off">
<ul id="menu">  
  <li>LIST1</li>
  <li>LIST2</li>
  <li>LIST3</li>
</ul>
```

`autocomplete="off"`は、ページリロード時にフォームがリセットされないFirefoxの仕様を解除するためのもの。また、モバイルSafariではラベルクリックでチェックボックスのON/OFFを切り替えることができないので、空の`onclick=""`を使いクリックイベントで代替している。

### CSS

こちらもIE9以上で利用可能。IE8以下でも、labelを`display: none`で非表示にしなければ利用できる。

```css
#toggle {
  display: none;
  cursor: pointer;
  }
#menu {
  display: none;
  }
#toggle:checked + #menu {
  display: block;
  }
```

CSSのみでドッロップダウンメニューを作成してみた。