CSS Оживляющий Nav элементы на: парить

Question

У меня есть стандартный вложенными UL структуру нав и некоторые CSS анимировать суб-ЧСА на :hover ...

Смотрите эту скрипку: http://jsfiddle.net/5kwsV/

Все работает, как ожидалось за исключением анимации на самом глубоком UL. Первый subnav оживляет высоту, второй - только для анимации.

Вот код, который обрабатывает анимацию самого глубокого UL, с которым у меня возникают проблемы.

nav ul li > ul > li > ul { 
    position: absolute; 
    display: block; 
    visibility: hidden; 
    width: 0px; 
    height: auto; 
    top: 0; 
    left: 100px; 
    padding: 0; 
    margin: 0; 
    -webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 
} 

nav ul li > ul > li:hover > ul { 
    position: absolute; 
    display: block; 
    visibility: visible; 
    width: 100px; 
    height: auto; 
    top: 0; 
    left: 100px; 
    padding: 0; 
    margin: 0; 
    -webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 
} 

Теперь проблема с вышеупомянутым кодом является то, что при наведении курсора мыши над «Майкл» ярлык нав, ширина и высота одушевляет. Он должен анимировать только ширину. Казалось бы, решение довольно очевидно, измените «все» на «ширину».

Si Я изменить это ...

-webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 

Для этого ...

-webkit-transition: width 0.6s ease; 
     -moz-transition: width 0.6s ease; 
     -ms-transition: width 0.6s ease; 
     -o-transition: width 0.6s ease; 
     transition: width 0.6s ease; 

Теперь при наведении курсора мыши, анимация одушевляет для ширины 0 до 100px, как это должно быть. Новая проблема - когда я перехожу на другую марку nav, она должна анимироваться от 100px до 0px, но вместо этого она просто мигает.

Что мне не хватает? Невозможно, чтобы жизнь меня видела, и я уверен, что это что-то глупое!

Answer 1

Вы также переводите свойство фона. Это не очевидно, потому что оно объявлено предком и просто унаследовано. Когда вы наводите курсор, фон изменяется по-разному, и вы видите переход ширины. Когда вы наводите курсор, фон изменяется в среднем, и вы не видите перехода по ширине.

Вы должны сделать:

transition-property: background, width; 
transition-duration: 0.6s; 
transition-timing-function: ease; 

со всеми приставками поставщика, конечно.

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

updated demo