ошибка объявления свойств зависания

Question

Я путаю при просмотре свойств зависания.

.accordian ul:hover li { 
    width: 50px; 
}  
.accordian ul li:hover { 
    width: 700px; 
} 

В чем разница между этими двумя строками? Это похоже на то, что первое свойство ul наводится на 50px, а во второй строке li элементы парят? Если это так, то в первой строке, почему были объявлены li?

Answer 1

В первой декларации говорится, что когда какая-либо часть ul зависнет, сделайте весь ее потомок li шириной 50 пикселей.

Вторая декларация гласит, что любая li, являющаяся потомком ul, зависает, делает ее шириной 700 пикселей.

Для обоих заявлений условие состоит в том, что списки являются потомками .accordian. Но я ожидаю, что это не имеет значения для значения вопроса.

Будем надеяться, что это поможет вам понять визуально: http://jsfiddle.net/zey4aLr9/8/