логика при работе с псевдоклассом :hover

li.top ul.submenu{display:none;}          
li.top:hover ul.submenu {display:block;} 

Первое правило прячет список-подменю.
Второе - показывает подменю, если на верхний пункт меню (родитель), в котором находится подменю, наведут курсор.
Общий принцип - родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков.

Мы задаем для элемента li.top ul.submenu (контекстный селектор), тогда почему правило применяется к родителю (в примере 2), а тот изменяет свойство элементов-потомков, чтобы подменю появилось, если даже само свойство не наследуется.

То, что на подменю не навести курсор это понятно - оно скрыто.
Интересен принцип работы (есть ли какое то правило).
Почему свойство применяется к родителю во втором примере?