CSS下拉菜單顯示動畫

Question

我使用的是網站導航的列表，當用戶將鼠標懸停在某些列表項上時，將顯示帶有附加導航選項的下拉列表。 在我的情況下，當用戶將鼠標懸停在“品牌”項目上時，所有不同品牌都會出現下拉菜單。 目前，下拉菜單會立即顯示，但我希望它以運動的形式出現，好像它在滑下來，而不是立即顯示。 CSS可能可行嗎，還是我需要一些jQuery魔術？ 碼：

HTML：

    <section id="nav">

        <div id="nav-wrapper">

            <ul id="nav-list">

                <li id="nav-home"><a href="">Home</a>
                </li>
                <li id="nav-brands"><a href="">Brands</a>
                    <ul id="brands-list">
                        <li><a href="">Brand 01</a>
                        </li>
                        <li><a href="">Brand 02</a>
                        </li>
                        <li><a href="">Brand 03</a>
                        </li>
                        <li><a href="">Brand 04</a>
                        </li>
                        <li><a href="">Brand 05</a>
                        </li>
                    </ul>
                </li>
                <li id="nav-about"><a href="">About Us</a>
                </li>
                <li id="nav-contact"><a href="">Contact Us</a>
                </li>

            </ul>

        </div>

    </section>

CSS：

#nav-brands { position:relative; }

#nav-list li:hover ul { display: block; opacity: 1; visibility: visible; background-color: #fff; }

#brands-list { padding: 10px 0px 0px 0px; position: absolute; top: 20px; left: -35px; width: 120px; box-shadow: none; display: none; opacity: 0;
               visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s;
               -o-transition: opacity 0.2s; -transition: opacity 0.2s; border:thin solid #000000; border-radius:0px 0px 5px 5px;
               border-top:0px;
}

#brands-list li { display: block; margin:0px 0px 5px 0px; padding:0px 0px 5px 0px; text-align:center; border-bottom:thin solid #CECECE;

}

#brands-list li:hover {}

#brands-list li:last-child { border-bottom:0px; }

Answer 1

看一個例子

http://jsfiddle.net/DHW9v/1/

您需要設置過渡定時功能

transition: opacity .8s ease-in-out;

Answer 2

沒有Jquery魔術。

CSS方法是將子列表包裝在div中。 使用該div設置子菜單的位置，然后使用overflow / transition技巧將所需的滑動效果賦予內部列表。

在這里查看： http : //jsfiddle.net/vrGfc/

同樣，從子菜單本身中刪除懸停效果。 它只需要應用於包裝div。

Answer 3

這里不需要任何jQuery或類似的東西-您正在尋找的CSS屬性是“轉換” -http://www.w3schools.com/css/css3_transitions.asp