Menú desplegable CSS (detener el elemento principal de estar activo cuando el elemento secundario es)

Question

Tengo un proyecto en el que estoy trabajando para algunos botones CSS simples, y estaba tratando de hacer un menú desplegable coincidente para ellos.El problema es que cuando hago clic en un elemento en un submenú, todos los padres por encima de ella también van al estado activo.Iba a usar un selector de padres, solo ellos no existen.Aquí está la página de demostración: http://jsfiddle.net/td7bk/4/ .

¡Gracias!

Editar: Por ahora, la demostración solo es totalmente compatible con Firefox, porque utiliza la propiedad -Moz-Transition y -Moz-Box-Shift, y la propiedad Frontera-Radius.

Answer 1

This is possible with just css if you are willing/able to adjust your html a tiny bit. I noticed you have a span tag wrapping text in a few li elements but not all of them so i wasn't sure if this was a requirement or not.

See http://jsfiddle.net/td7bk/8/ for an example.

Also, if you're in the mood for a quick tip, take a look at the adjusted css selectors. Simplified and more efficient.

Hope this helps!