Psuedo-class to keep div visible on focus / active? - css

Question

I have a div that is hidden until the user clicks on a link. Using the a:active + div selector the div is shown. I then have div:active, div:focus to keep the div visible.
Whilst making the div appear was simple enough, keeping it visible is the problem I have. If I click on the div (taking the active off the link and placing focus / active on the div) then the div disappears again.
I have tried using div:hover and while that shows the div (even after I click on it) when I hover off the div still disappears. Why are :active and :focus not being applied to my div?
Example: http://jsfiddle.net/pJWPE/

Answer 1

You could take a different approach, using the :target pseudoclass instead. The best way to illustrate this is with an example:
#box {
display: none;
}
#box:target {
display: block;
}
Open Close
<div id="box">content</div>
Warning, I'm not sure what browser support is like for this example. It works in my version of Chrome.

Answer 2

Why are :active and :focus not being applied to my div?
Because :active and :focus have some restrictions:
6.6.1.2. The user action pseudo-classes :hover, :active, and :focus
Interactive user agents sometimes change the rendering in response to user actions. Selectors provides three pseudo-classes for the selection of an element the user is acting on.
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos
A <div> isn't any form of input (<textare>, <input>, ...) or otherwise interactive element (like <a>, <audio>, <video>). It's just a container. Neither :focus nor :active are going to be applied.
Use :target instead as suggested by Casey.

Answer 3

Context is a menu containing submenus, which I want to be shown on clicking the related menu, and keep it showed while clicking a link. (quite similar to you).
HTML Markup :
<nav>
<ul>
<li>
<a href="#" >
</a>
<div>
<ul>
<li>
submenu link1</li>
<li>
submenu link2</li>
<li>
submenu link3</li>
</ul>
</div>
</li>
</ul>
</nav>
For Firefox & Chrome web browser, I personnally use :
nav > ul > li > a:focus + div, nav > ul > li > a + div:active {
display : block;
}
The first selector references to my link anchor, in order to get which submenu show when it is clicked/tab selected. The second one, is to keep the submenu div opened as you click on a link (it keep showing the active div).
This works great for me but not for IE unfortunatly.