¿li:focus/active en lugar de li:hover?

[daPhyre]

Buen día compañeros. La forma a como le puse en el título ya la he intentado, y por lógica no funciona. Lo que intento es con la siguiente parte:

Código HTML:

<style type="text/css">
#info li div{display:none;}
#info li:active div{display:block;}
</style>

<div id="info">
<ul>
 <li><a href="#">Uno</a>
 <div>
 <h3>Uno</h3>
 <p>Texto1 texto1 texto1 texto1 texto1</p>
 </div>
 </li>
 <li>Dos</li>
</ul>
</div> 

Como verán, al pasar el mouse por encima de "Uno", se va a ver la información de este, pero me gustaría que esto aconteciera al estar enfocado/activo el link. Si alguien sabe si es posible y como, estaría agradecido, aunque no estoy siquiera que sea posible tal cosa.

De paso aprovecho. ¿Hay algún problema (De compatibilidad o incluso semántico) con poner "divs" y "heads" en las listas como lo hice yo? ¡Gracias de antemano!

[Mikmoro]

Sí, como expliqué en uno de los menús desplegables que hice para MasterXNicoX, la forma de conseguir que un li tome el foco es colocarle un tabindex y poner el selector en el propio html (en la cabecera).

Mira el menú 4 de las FAQ

Mikel.

[daPhyre]

Después de largas horas de batallar, intentando comprender tu código para saber que hacía mal, terminé por darme cuenta que aunque IE7 ya soporta el hover en li, aun no soporta el active (Ni se hable del focus), por lo que aun funciona únicamente con el truco de las tablas...

Supongo que para IE7 tambien tendré que usar el truco que planeaba dejar solo para los IE6-... Y yo que ya tenía más esperanzas en él... Tendré que esperar hasta que llegue el 8... o el 12

[Mikmoro]

Así es. Como te has dado cuenta, en ese menú concreto cambie el "if IE6" por "if IE"

Y Safari para windows soporta el active pero no el focus sobre un li, así que sólo se ve mientras mantienes pulsado.

Mikel.

[daPhyre]

Para tal caso, entonces es mejor no hacer menús con este tipo, pues aunque pueda hacer trucos con IE, en Safari simplemente no se va a poder seleccionar nada en su interior. Creo que mejor me quedo con el hover. ¿O no habrá un "<!--[if FF]>"?

Bueno, muchas gracias por la ayuda, seguro no seré el único que aprenda con esta lección. Gracias

[Mikmoro]

Debería haber un <!--[if != FF]>

Mikel.

[Mikmoro]

Por cierto: por cuestión de usabilidad, yo no usaría un menú como ese que te he dicho, que fue para MasterXNicoX; no obligaría nunca al usuario a pulsar para ver las opciones que cuelgan de un menú principal. Personalmente prefiero ni siquiera usar un desplagable, pero es más aceptable para mi que obligar a pulsar para ver las subsecciones.

Dice una máxima de usabilidad (sobre todo de comercio en la web), que con 3 clicks se debe poder llegar a todas partes. Si se necesitan más, empieza a ser peligroso, porque el cuarto click y sucesivos podrían ser al botón atrás.

Mikel.

[daPhyre]

Muy buen punto además...

En lo personal, la idea éra aprovechar el div flotante que siempre te sigue, y desplegar un menú que te diera opciones en la misma página (Quizá algo similar a "Enlaces" aquí arriba, pero claro, sin JS), y por supuesto, ocultarlo mientras no fuera utilizado, para apreciar el resto de la página.

Y no creo que tal menu afectara a la accesibilidad, pues aun moviendose con tabuladores, debería activarse (Creo yo), pero bueno, siendo que no sirve en Safari... ¿Que más se le puede hacer?