Переход CSS - проблема с высотой в тегах UL/LI

Question

Я пытаюсь получить мои переходы CSS плавно, но у меня есть последний вопрос. Я признаю это довольно поверхностно, но я бы хотел, чтобы это было «исправлено», если это вообще возможно. Я пробовал его в Chrome, Firefox и IE, и он делает это во всех браузерах.

Элементы UL и LI, которыми я управляю, являются частью панели навигации. Панель инструментов можно увидеть в верхнем левом углу следующего URL: http://fretfast.com/templates/clean/sample.php

При наведении курсора на один из элементов, который имеет расширяемый список, например, learn, teach или community, вы увидите, что она расширяется очень плавно (при условии, что ваш браузер поддерживает переходы CSS3, конечно); однако, когда вы перемещаете указатель мыши от расширяемого списка, предельная область в верхней части списка немедленно уничтожается, что приводит к тому, что весь последующий текст сдвигается слишком быстро.

Например, если вы наведите курсор мыши на learn, расширяемые меню будет представлено, что дает варианты lessons, questions и tips. Однако, когда вы перемещаете мышь, и меню рушится, первый параметр (lessons) мгновенно выдвигается так, что он находится прямо под основным текстом кнопки (learn).

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

#topNav { 
    list-style-type: none; height: 25px; padding: 0; margin: 0; 
} 
#topNav * { font-size: 15px; } 
#topNav li { 
    float: left; position: relative; z-index: 1; 
    padding: 0; line-height: 23px; background: none; repeat-x 0 0; 
    padding-top: 2px; 
} 
#topNav li:hover { 
    background-color: #C0C0C0; z-index: 2; 
    padding-top: 0; 
    border-top: 2px solid #59B4FF; 
} 
#topNav li a { 
    display: block; padding: 0 15px; color: #000; text-decoration: none; 
} 
#topNav li a:hover { color: #222222; } 
#topNav li ul { 
    opacity: 0; position: absolute; left: 0; width: 8em; background: #C0C0C0; 
    list-style-type: none; padding: 0; margin: 0; 
} 
#topNav li:hover ul { opacity: 1; } 
#topNav li ul li { 
    float: none; position: static; height: 0; line-height: 0; background: none; 
} 
#topNav li:hover ul li { 
    height: 25px; line-height: 25px; 
} 
#topNav li ul li a { background: #C0C0C0; } 
#topNav li ul li a:hover { 
    text-indent: 0.3em; 
    background-color: #59B4FF; 
} 

#topNav li { 
    transition: background-color 0.2s ease; 
    -o-transition: background-color 0.2s ease; 
    -moz-transition: background-color 0.2s ease; 
    -webkit-transition: background-color 0.2s ease; 
} 
#topNav li a { 
    transition: all 0.2s ease; 
    -o-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -webkit-transition: all 0.2s ease; 
} 
#topNav li ul { 
    transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
} 
#topNav li ul li { 
    transition: height 0.5s ease; 
    -o-transition: height 0.5s ease; 
    -moz-transition: height 0.5s ease; 
    -webkit-transition: height 0.5s ease; 
} 
#topNav li ul li a { 
    transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 

    transition: text-indent 0.1s linear; 
    -o-transition: text-indent 0.1s linear; 
    -moz-transition: text-indent 0.1s linear; 
    -webkit-transition: text-indent 0.1s linear; 
} 

Я не верю, что это не имеет ничего общего с padding-top спецификации в #topNav li либо, потому что я только добавил, что сегодня на границе выделения эффекта и эта проблема продолжается дольше, чем это. Любая помощь приветствуется.

Answer 1

Свойство, которое вызывает это высоту линии; более конкретно это.

#topNav li:hover ul li { 
    height: 25px; 
    line-height: 25px; 
} 

Если вы посмотрите на переходы, это указано только по высоте. Вы можете изменить переход на на все, кажется, что он выглядит нормально. Если нет, то, вероятно, лучше всего было бы установить высоту строки в 25px в не-парил свойств, а не на парил (то есть, что делает его фиксировано)

#topNav li ul li { 
    transition: all 0.5s ease; 
} 

Как вы можете отлаживать легко решении проблем, касающихся зависать?

В инспекторе Chrome, выберите пункт, где определенно парение, перейдите на вкладкустилей, выберите тумблер элементого состояние и проверить парение. Теперь состояние настроено на постоянное зависание. Просто пойдите вокруг проверки и отмены проверки, чтобы узнать, где у вас есть проблема.