javascript - 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

没有 Jquery 魔法。

CSS 方法是将您的子列表包装在一个 div 中。使用该 div 设置子菜单位置，然后使用 overflow/transition 技巧为内部列表提供您正在寻找的滑动效果。

在这里查看:http://jsfiddle.net/vrGfc/

此外，从子菜单本身移除悬停效果。它只需要应用于包装器 div。