css - slideUp/slideDown 使用纯 CSS

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%;

}

fiddle :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，其中大部分是不需要的