1

ユーザーがメイン項目をクリックするとサブメニューが表示される、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 を使用しないようにしたいと考えています。

4

1 に答える 1

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>
于 2012-04-17T03:17:43.677 に答える