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

Question

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

标记：

<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 中正常工作，当单击红色方块时，菜单会显示，直到我们单击其他位置。但是，在 chrome 中，只有在单击并按住红色方块时才会显示菜单。

我不知道是什么原因造成的。有人可以启发我吗？

注意：我想只用纯 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>