CSS單擊suckerfish菜單不會保持打開狀態

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>