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標籤中的高度問題

回答

相關問題