使用CSS無法獲得平滑的下拉菜單

Question

嗨，大家好，我在使用CSS處理子菜單下拉菜單時遇到了麻煩。 我正在嘗試添加平滑的過渡外觀，但是當我將鼠標懸停時，菜單甚至都沒有顯示。 我確定這是我所缺少的小東西，但是我似乎無法弄清楚問題出在哪里。 這是代碼：

#main-navigation ul.folder-child{
    opacity: 0;
    visibility: hidden;
    -moz-transition: height 0.3s ease-in-out;
    -ms-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}

#main-navigation li:hover ul.folder-child{
    opacity: 1;
    visibility: visible;
    top: 50px;
}

我會很感激任何人都可以提供的幫助。 提前致謝！

Answer 1

您僅為高度定義過渡，並且沒有為高度定義css規則。 這是您的解決方案。

請注意：要轉換height屬性，您需要在正常和懸停狀態下定義高度。

ul.folder-child {
    width: 180px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;

    position:absolute;
    top: 100%;
    left: 0;

    transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}
#main-navigation li:hover > ul.folder-child {
    height: 100px;
    opacity: 1;
    visibility: visible;
}

查看http://jsfiddle.net/logiccanvas/vWDvy/480/

Answer 2

也許檢查您的瀏覽器，IE不支持所有CSS3功能。

Answer 3

也許最好使用display：none 和 display：block 而不是 不透明度 和 可見性 ；

<ul>
        <li>
            <a href="#">Item #1</a>
            <ul>
                <li><a href="">Sub-Item #1</a></li>
                <li><a href="">Sub-Item #2</a></li>
                <li><a href="">Sub-Item #3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item #2</a>
            <ul>
                <li><a href="">Sub-Item #4</a></li>
                <li><a href="">Sub-Item #5</a></li>
                <li><a href="">Sub-Item #6</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item #3</a>
            <ul>
                <li><a href="">Sub-Item #7</a></li>
                <li><a href="">Sub-Item #8</a></li>
                <li><a href="">Sub-Item #9</a></li>
            </ul>
        </li>
    </ul>

ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}

http://jsfiddle.net/spliter/vWDvy/

在IE ASWELL上工作！