悬停下拉菜单和可访问的键盘

Question

即时尝试制作鼠标悬停下拉菜单，并可通过键盘标签焦点进行访问...

如何使用键盘选项卡焦点显示图层？请帮忙......

这是我的代码

<div class="myM">
            <a href="#" class="myMTxt"><strong>Menu</strong></a>
            <div class="myMList">
                <span class="arrow"></span>
                <ul>
                    <li><a href="#">sub1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li><a href="#">sub3</a></li>
                </ul>  
            </div>
        </div> 




#myMenu { position:absolute; top:87px; right:0;    z-index:200;  }

.myM { position:relative; width:132px;  }
.myM a.myMTxt { display:block;  height:20px; padding:0 5px; color: #9d9d9d;}

.myMList { position:absolute; top:0; left:0; display:none; }
.myMList ul { width:132px; border-top:1px solid #f2f2f2;   }
.myMList li { background:#eee; }
.myMList li a { display:block;  height:20px; padding:0 5px; color:#9d9d9d; font-size:11px; line-height:20px; }
.myMList li:hover { background:#676767;  }
.myMList li:hover a { color:#fff; display:block;   } 


.myM:hover div.myMList { display:block;}

Answer 1

Additiona在元素上添加focus

.myM:focus div.myMList { display:block;}