CSS 点击吸盘鱼菜单在 chrome 中不会保持打开状态

Question

我在CSS中构建了一个简单的傻瓜菜单，当用户单击主项时将显示一个子菜单。

标记：

<div class="bodywrapper">
<a class="button" href="#"></a>
   <ul class="menu">
      <li>test test test</li>
      <li>test test test test test test test test test test test test test test test</li>
   </ul>
</div>

.CSS：

.button{
  display: block;
  background-color: red;
  width: 10px;
  height: 27px;
}
.button:focus +ul, .button:active +ul{
  display: block;
}
.menu{
  display: none;
  border: 1px black solid;
}
.menu:hover{
    display: block;
}​

我的代码的小提琴在这里：http://jsfiddle.net/pLgLj/

菜单在Firefox和IE中正常工作，单击红色方块时，菜单将显示，直到我们单击其他地方为止。但是，在镶边中，菜单仅在单击并按住红色方块时显示。

我不知道是什么原因导致这种情况。有人可以开导我吗？

注意：我想只用纯CSS而不是javascript来做到这一点。

Answer 1

解决方案是将tabindex属性添加到按钮的标记中：

<div class="bodywrapper"> 
<a class="button" tabindex="0" href="#"></a>  <---tab index added here.
   <ul class="menu"> 
      <li>test test test</li> 
      <li>test test test test test test test test test test test test test test test</li> 
   </ul> 
</div>