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>

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

1 个答案: