Question

I have built a simple suckerfish menu in CSS where a submenu will be displayed when the user clicks on the main item.

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;
}​

A fiddle of my code is here: http://jsfiddle.net/pLgLj/

The menu works properly in Firefox and IE, when the red square is clicked, the menu displays until we click elsewhere. However, in chrome, the menu only displays when the red square is clicked and held down.

I am at lost as to what could be causing this. Could someone enlighten me?

Note: I want to do this with just pure CSS and no javascript.

Answer 1

The solution is to add a tabindex attribute to the markup of the button:

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