2012-04-17 5 views
1

Я создал простое меню suckerfish в CSS, где подменю будет отображаться, когда пользователь нажимает на основной элемент.CSS click suckerfish menu не остается открытым в chrome

Markup:

<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.

ответ

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>