キーボードでアクセス可能なメニューを探しているときに、この質問に出くわしました。その答えとして、CSS ドロップダウン メニューhttp://jsfiddle.net/cfWpE/があります。Javascriptなしでサブメニューを表示するため:hover
に、アイテムではなくメニューのアンカーでスタイリングを使用しているようですが、方法がわかりません。<ul>
CSS で私よりも優れている誰かが、これがどのように機能するかを説明できますか? これを 3 レベルのメニューに拡張したいのですが、2 レベルの仕組みを理解していないと難しいでしょう。
明確にするために編集:
実際に私を混乱させているのはキーボード部分ではありません。現在のフォーカス リンクの更新をタブで移動することは理解しています:focus
が、これらの要素に適用されていると思われる唯一の CSS ルールは次のとおりです。
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background: black;
}
margin-right を 1 ピクセルに設定すると親が表示される仕組みがわかりません<li>
。