Show div using :active pseudo class - html

Question

I want to show a div when I click on the image, but the div id not staying put when I am not clicking on the image similar to this site http://www.google.com/nexus/ my jsfiddle http://jsfiddle.net/7KJy4/.
please check my code and update if neccessary thanks! My html code contains a simple div and list items displayed as inline. I used element :active for the pop up when i clicked on the image, but when i clicked on the image the div does not hold for the user to click on the nav links.http://jsfiddle.net/7KJy4/
My html
<div id="hover">
<img src="https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/menu-24-24.png">
<div id="menu">
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
<li>Menus</li>
</div>
</div>
my css
*
{
margin:0;
padding:0;
}
#hover
{
width:100px;
height:300px;
}
#hover:active > #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
#menu
{
visibility:hidden;
}
li
{
}

Answer 1

If you want to do it in pure css, you have to use :focus instead of :active and focus on the image:
#hover > img:focus + #menu
{
visibility:visible;
position:relative;
background:yellow;
width:100px;
height:300px;
}
You will also need to add "tabIndex" to the image so it can receive focus.
DEMO: http://jsfiddle.net/7KJy4/1/
The side-effect of this approch - user can Tab into the image so your menu can be activated by keyboard as well.
If you want to to it on click without above approach you will have to use some JS.