¿Qué significa el formato de este selector CSS?

Es un menú desplegable.

En primer lugar, desde la derecha, aplique reglas a un elemento de lista desordenada con una clase de .submenu

Esa lista desordenada está dentro de un elemento de lista. Las reglas se aplican cuando el elemento de la lista se desplaza sobre él.

Ese elemento de la lista está dentro de una lista desordenada con un ID de #menu.

Está mal escrito porque es demasiado específico. En primer lugar, podría haberse escrito #menu li: hover .submenu. No hay una buena razón para escribir ul # menu. ul.submenu es un poco más comprensible si hubiera múltiples .submenu utilizando diferentes elementos, lo cual es ridículo, pero de todos modos.

Entonces, es poco probable que haya menús desplegables que no se desplieguen, por lo que debería hacer li: hover .submenu.

Asumiendo el acceso al HTML, para mayor claridad, sería mejor ser explícito sobre el rol, por lo que agregar una clase de, digamos .submenu-trigger al elemento de la lista generaría .submenu-trigger: hover .submenu {/ * mis reglas * / }

Escriba selectores de izquierda a derecha, pero léalos de derecha a izquierda si no está seguro de lo que están seleccionando. Eso es lo que hace el navegador.

El selector ul#menu li:hover ul.sub-menu coincide con:

  1. Un elemento con clase “submenú” …
  2. De tipo ul
  3. Descendió de…
  4. Un elemento que se está moviendo …
  5. De tipo li
  6. Descendió de…
  7. Un elemento con ID “menú” …
  8. De tipo ul .

Además de la respuesta de Daniel, en palabras simples:

El marcado es probablemente así:

  

Gracias Bulat Bochkariov por el formato.

ul # menu li: hover ul.sub-menu = #menu li: hover .sub-menu = pasar un elemento de la lista dentro del menú hará algo al submenú de elementos de la lista, probablemente muestre bloque en lugar de ninguno.