使用Pure CSS进行slideUp / slideDown

Question

我在菜单上悬停时使用以下代码显示菜单和显示子菜单。我想在子菜单中添加一些动画，就像jQuery中的slideUp和slideDown一样。但我想为此使用纯CSS。我应该在代码中做些什么改变呢？

<div id="main_nav">
    <ul>
        <li >
            <a href="#" >Item 0</a>
        </li>
        <li>
            <a href="#">
                Item 1
            </a>
            <ul class="sub-menu">
                <li><a href="#">Item 1 0</a></li>
                <li><a href="#">Item 1 1</a></li>
                <li><a href="#">Item 1 2</a>
                    <ul class="sub-menu">
                        <li>
                            <a href="#">Item 1 2 0</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">
                <span>Item 3</span>
            </a>
            <ul class="sub-menu">
                <li><a href="#">Item 3 0</a></li>
            </ul>
        </li>
    </ul>
</div>




#main_nav ul,#main_nav ul ul{
    margin:0;
    list-style:none;
    padding:0;
}
#main_nav ul ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    background-color:#1b1b1b;
    padding:0 10px 10px;
}
#main_nav ul li:hover>*{
    display:block;
}
#main_nav ul li{
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
#main_nav ul li:hover{
    z-index:1;

}
#main_nav ul ul ul{
    position:absolute;
    left:100%;
    top:0;
}
#main_nav ul{
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;
    padding:0;
    display:inline;
}
* html #main_nav ul li a{
    display:inline-block;
}
#main_nav ul>li{
    margin:0;
}
#main_nav ul a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font-size:12px;
    color:#000;
    cursor:pointer;
    padding:10px;
    background-color:#FFFFFF;
}
#main_nav ul ul li{
    float:none;
    margin:10px 0 0;
}
#main_nav ul ul a{
    text-align:left;
    padding:4px;
    background-color:#1b1b1b;
    font-size: 12px ;
    color:#FFF;
}
#main_nav ul li:hover>a{
    background-color:#000000;
    color:#2b97dd;
    opacity:90%;
}
#main_nav ul ul li:hover>a{
    background-color:#000000;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
    opacity:90%;

}

小提琴：http://jsfiddle.net/Midhun28/ZstjT/

Answer 1

在纯CSS中伪造它的一种可能方法是通过动画top属性：

li{
  z-index: 10;   /* <- must appear above the animation */
}

ul ul{
  visibility: hidden;
  top: -100%;
  z-index: -5; 
  opacity: 0;
  transition: visibility 0s linear 0.4s, opacity .3s linear, top .3s ease-out;         
}

li:hover > ul{
  visibility: visible;
  opacity: 1;    
  top: 58px;
  transition-delay: 0s;
}

隐藏菜单容器上的overflow，或在菜单上方放置一些高z-index的元素，并用颜色填充。

Here's an example.我已经清理了一些你的CSS，其中很多都不需要

Answer 2

我最近想看看jQuery SlideUp在属性样式中做了什么，所以我尝试拍摄截图（比查看代码更容易看到：P）

这是:)

因此，可以使用CSS3复制此动画。 只需为边距，填充和高度设置动画，您就可以获得与jQuery相同的效果。