如何在选项卡上显示下拉菜单

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

如果您添加tabindex并向li元素中添加正确的CSS样式，它将起作用： DEMO

的HTML

<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;}

Answer 2

一旦包含以下内容，它将起作用：

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