CSS Transition - UL/LI 标签中的高度问题

Question

我正在努力使我的 CSS 过渡顺利进行，但我遇到了最后一个问题。我承认这很肤浅，但如果可能的话，我想“修复”它。我已经在 Chrome、Firefox 和 IE 中尝试过它，它在所有浏览器中都是如此。

我正在操作的 UL 和 LI 元素是导航工具栏的一部分。工具栏可以在以下网址的左上角看到: http://fretfast.com/templates/clean/sample.php

当您将鼠标悬停在具有可扩展列表的元素之一上时，例如 learn、teach 或 community，您将看到它扩展得非常顺利(当然，假设您的浏览器支持 CSS3 转换)；然而，当您将鼠标从可扩展列表中移开时，列表顶部的边缘区域会立即消失，这使得所有后续文本向上移动的速度太快。

例如，如果您将鼠标悬停在 learn 上，将显示一个可扩展菜单，其中提供了 lessons、questions 和 提示。但是，当您将鼠标移出并且菜单折叠时，第一个选项 (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;
}

我也不认为它与#topNav li 中的padding-top 规范有任何关系，因为我今天刚刚添加了它以实现边框高亮效果而且这个问题已经持续了更长的时间。非常感谢任何帮助。

Answer 1

导致这种情况的属性是行高；更具体地说是这个。

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

如果您查看转换，它仅在高度上指定。您可以将过渡更改为全部，它似乎显示正常。如果不是，最好的办法可能是在非悬停属性中将行高设置为 25px，而不是在悬停属性中设置行高(即固定)

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

如何轻松调试与悬停相关的问题？？

在 Chrome 检查器中，选择定义悬停的元素，转到样式选项卡，选择切换元素状态并选中悬停。现在状态设置为永久悬停。只需四处检查和取消检查属性，看看哪里有问题。