탭에서 드롭 다운 메뉴를 표시하는 방법

Question

사용자가 링크에서 탭하면이 드롭 다운 메뉴가 어떻게 작동하는지 설명 할 수 있습니까?

http://jsfiddle.net/NnCVv/234/

<ul id="drop-nav"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a> 
    <ul> 
     <li><a href="html.html" tabindex="0">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">JavaScript</a></li> 
    </ul> 
    </li> 
</ul> 



ul {list-style: none;padding: 0px;margin: 0px;} 
    ul li {display: block;position: relative;float: left;border:1px solid #000} 
    li ul {display: none;} 
    ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none; 
      white-space: nowrap;color: #fff;} 
    ul li a:hover {background: #f00;} 
    li:hover ul {display: block; position: absolute;} 
    li:hover li {float: none;} 
    li:hover a {background: #f00;} 
    li:hover li a:hover {background: #000;} 
    #drop-nav li ul li {border-top: 0px;} 
    li:focus ul {display: block; position: absolute;} 

Answer 1

이 포함되면 그것은 작동합니다

<script src="jquery.transit.min.js"></script> 

Answer 2

당신이 tabindex를 추가하고 또한 당신의 li 요소에 적절한 CSS 스타일을 추가하는 경우, 작동 것이다 : DEMO

<ul id="drop-nav"> 
    <li tabindex="1"><a href="#">Item 1</a></li> 
    <li tabindex="2"><a href="#">Item 2</a> 
    <ul> 
     <li><a href="html.html" tabindex="0">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">JavaScript</a></li> 
    </ul> 
    </li> 
</ul> 

CSS

ul {list-style: none;padding: 0px;margin: 0px;} 
    ul li {display: block;position: relative;float: left;border:1px solid #000} 
    li ul {display: none;} 
    ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none; 
      white-space: nowrap;color: #fff;} 
    ul li a:hover,ul li:focus a {background: #f00;} 
    li:hover ul,li:focus ul {display: block; position: absolute;} 
    li:hover li,li:focus li {float: none;} 
    li:hover a,li:focus a {background: #f00;} 
    li:hover li a:hover,li:focus li a:hover {background: #000;} 
    #drop-nav li ul li {border-top: 0px;}