CSS: ¿Cómo la configuración de un margen derecho hace que el elemento primario sea visible en este ejemplo?

Question

Al buscar menús accesibles por teclado, tropecé con this question, que tiene como respuesta un menú desplegable de CSS http://jsfiddle.net/cfWpE/. Parece utilizar el estilo en los anclajes del menú en lugar de :hover en los elementos <ul> para mostrar los submenús sin Javascript, pero no puedo entender cómo.

¿Podría alguien que es mejor que yo en CSS explicar cómo funciona esto? Me gustaría tratar de extender esto a un menú de 3 niveles, pero sin entender cómo funciona en dos niveles, va a ser difícil.

editado para mayor claridad:

No es en realidad la parte del teclado que me confunde; Entiendo que tabulación a través de las actualizaciones :focus en el enlace de enfoque actual, pero la única regla CSS que parece aplicarse a esos elementos es

ul.menu li.list a.category:hover, 
ul.menu li.list a.category:focus, 
ul.menu li.list a.category:active { 
    margin-right:1px; 
    background: black; 
} 

No entiendo cómo establecer el margen de derecha a 1 píxel hace el padre <li> visible.

Answer 1

Esta es una técnica interesante para lograr un menú desplegable.

Los elementos de la lista .list tienen un valor muy negativo margin-top y un ancho de 250px. Esto coloca su contenido fuera de la ventana gráfica del navegador. Los anclajes secundarios a.category tienen un margen superior positivo con exactamente el mismo valor, por lo que son visibles para el usuario como si estuvieran colocados normalmente. Ahora ambos, el a.category y el ul.submenu tienen un float:left aplicado. es por eso que el submenú no aparece debajo del ancla, sino junto a él. (Pero no tiene margen superior, por lo que sigue siendo "invisible") Ambos elementos (a.category y ul.submenu) tienen 125px ancho y se ajustan perfectamente a la matriz li que tiene un ancho de 250px. Ahora, al pasar el puntero, el ancla obtiene un margen adicional de 1px. Esto hace que ambos elementos sean demasiado anchos para caber en el contenedor principal de lado a lado y el submenú flotante se rompe en una nueva línea y aparece de repente debajo del anclaje - TADA: -D

Espero que puedan seguir mi explicación, si no pregunten por favor, qué parte necesito aclarar;)

No es posible extender esto a un tercer nivel - Simplemente iría con un menú css regular con display:block; y hide. Sin embargo, puede usar el posicionamiento absoluto y cambiar el valor de top desde un valor negativo muy alto a 0 al pasar el ratón, lo que tendría el mismo efecto.

_{En general, usaría esto con cuidado. Algunos motores de búsqueda consideran que el texto que está oculto a través de márgenes negativos o sangrías de texto es blackhat SEO y puede penalizar a uno por eso. Aunque es posible que Google sea lo suficientemente astuto como para reconocer esto como un menú desplegable normal}