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

我试图让我的CSS转换顺利进行，但我有最后一个问题。这是非常肤浅的，我承认，但是我希望尽可能让它“固定”。我已经在Chrome，Firefox和IE中试过了，它在所有浏览器中都是这样。CSS转换 - UL/LI标签中的高度问题

我操纵的UL和LI元素是导航工具栏的一部分。工具栏可以在以下网址的左上角可以看到： 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规范要么，因为我只是补充说，今天的边框高亮效果和这个问题已经持续了长于。任何帮助是极大的赞赏。

来源

2013-02-26 SISYN

造成这种情况的属性是行高;更具体地说这一个。

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

如果你看过渡，它只在高度上指定。你可以改变过渡到全部，它似乎显示正常。如果不是，可能是最好的将是在非盘旋性能，而不是在悬停（即，使其固定）

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

设置行高为25px的你怎么能调试容易有关问题盘旋？

在Chrome检查，选择悬停定义的项目，转到风格选项卡中，选择肘节式元件的状态和检查悬停。现在状态被设置为永久悬停。只需绕过检查和取消检查问题，看看问题出在哪里。

来源

2013-03-03 17:48:22 vals

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

回答

相关问题