Menus HTML5 usando apenas CSS3 - Ativando links

Existe um problema com o foco para o link nos menus exclusivamente em CSS3, pois os estilos que ativam os blocos também os desativam quando se vai clicar nos links.

Ao declararmos o estilo:

#menu li ul {display:none;}

Ocorre algo esperado e algo indesejável também. Os submenus ficam fechados (esperado). Ao clicarmos em "Menu 1", ou "Menu 2", etc, os submenus são abertos, devido ao estilo:

#menu li:focus ul {display:block;}

Isto também é esperado, aliás, obrigatório. Mas quando clicamos em uma das opções do submenu, como "1.1", ou "1.2", por exemplo, como o "UL" do submenu perde o foco, ele fecha o submenu antes que o link possa ser ativado.

Como resolver isto ?

O exemplo a seguir resolve este problema com ":active":

<style>
#menu li ul {display:none;}
#menu li ul:active {display:block;}
#menu li ul:active li {display:block;}
#menu li:focus ul {display:block;}
#menu li ul li a {display:block;}
</style>
<ul id="menu">
<li tabindex="1">Menu 1
<ul>
<li tabindex="11"><a href="http://www.copasa.com.br" target="_blank">1.1</a></li>
<li tabindex="12"><a href="http://www.google.com" target="_blank">1.2</a></li>
<li tabindex="13"><a href="http://www.baixaki.com.br" target="_blank">1.3</a></li>
</ul>
</li>
<li tabindex="2">Menu 2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="3">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>

Informamos ao interpretador de páginas que enquanto o grupo "UL" do submenu estiver ativo (ou seja, qualquer de seus elementos, seja UL, seja LI, estiver em foco) ele deverá ficar aberto.