하위메뉴 포커스(탭이동) 웹접근성 관련 질문드립니다.
남은
고무수다님이 도와주셔서 포커스를 인접클래스로 잡아서 하위메뉴가 열리도록 수정은 하였으나,
하위메뉴로 탭이동하면, li a에서 포커스가 벗어나기때문에, 하위메뉴가 다시 숨는것 같습니다.
방법이 있을까요.. 이전 질문 보시면, 쿼리도 사용하고 여러가지로 해보았는데, 몇일째 해결을 못하고 있습니다. ㅜ
소스는 이렇습니다.
------------------------------------------
div id=gnbmenu
ul
li class=top_1
a href=#제품소개/a
ul class=sub
lia href=#소비자제품/li소비자/a/li/a
lia href=#비즈니스제품/li비즈니스/a/li/a
/ul
img src=images/product_intro.gif /
/li
li class=top_2
a href=#갤러리/a
ul class=sub
lia href=#갤러리/a/li
lia href=#사진전/a/li
/ul
img src=images/gnb_gallery.gif /
/li
/ul
/divcss
#gnbmenu li ul.sub{
position:relative; top:4px; padding-top:10px; width:115px;
z-index:300; display:none;
}#gnbmenu ul li:hover ul.sub, #gnbmenu ul li a:focus + ul.sub {
display:block;
background:#00906d; height:185px;
}
#gnbmenu ul:hover ul:nth-child(2){
width:115px; background:#fff;
display:block; border-bottom:solid 1px #ccc; height:185px;
}
이렇게 온 메뉴는 색상으로 그외에 나머지 메뉴들은 모두 흰 백그라운드에 모두 펼쳐지도록 되어있습니다..ㅜㅜ