CSS 过渡 - UL/LI 标签中的高度问题答案

【问题标题】：CSS Transition - Issue with Height in UL/LI tagsCSS 过渡 - UL/LI 标签中的高度问题
【发布时间】：2013-02-12 09:50:12
【问题描述】：

我正在努力使我的 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;
}

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

【问题讨论】：

标签： css hover overflow css-transitions

【解决方案1】：

导致该属性是行高；更具体地说是这个。

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

如果您查看过渡，它仅在高度上指定。您可以将过渡更改为all，它似乎显示正常。如果没有，最好将非悬停属性中的行高设置为 25px，而不是悬停（即使其固定）

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

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

在 Chrome 检查器中，选择定义悬停的项目，转到 styles 选项卡，选择 toggle element state 并检查悬停。现在状态设置为永久悬停。只需四处检查和取消检查属性，看看你哪里有问题。

【讨论】：