Question

这是我的css代码：

.sub-menu li {
    float: none !important;
    border-right: none !important;
}

.sub-menu {
    z-index: 1000;
    position: absolute;
    background: #222;
    padding: 15px;
    border-right: 2px solid white;
    display: none;
}

.menu ul li:hover .sub-menu {
    display: block;
}

这是我的HTML代码：

<div class="menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Watch Live</a></li>
                        <li><a href="#">Programs</a>
                        <ul class="sub-menu">
                            <li><a href="#">Films</a></li>
                            <li><a href="#">Documentary</a></li>
                            <li><a href="#">Comedy</a></li>
                            <li><a href="#">Culture</a></li>
                        </ul>
                        </li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>

这是我的问题如何让我的下拉向下滚动或淡入Css过渡，我尝试添加这个：http://codepen.io/anon/pen/AXkJGa但它没有工作我正在做的是试图扭转它以便它向下滑动从顶部而不是底部，但它不起作用，所以然后我尝试了这段代码：

-moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;

它仍然没有用，请帮忙。

我不想使用JAVASCRIPT。

谢谢

Answer 1

你不能使用display none与过渡它不起作用，使用可见性或最小高度或不透明度，这个演示使用不透明度和可见性，它在代码笔中http://codepen.io/sajrashid/pen/QERJvO

.sub-menu li {
float: none !important;
border-right: none !important;
}

.sub-menu {
z-index: 1000;
position: absolute;
background: #222;
padding: 15px;
border-right: 2px solid white;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition-duration:visibility 0s, opacity 0.5s linear;
}

.menu ul li:hover .sub-menu {
visibility: visible;
opacity: 1;
}

演示：https://jsfiddle.net/bvcc2gwz/

Answer 2

尝试淡入淡出：

.sub-menu li {
    float: none !important;
    border-right: none !important;
}

.sub-menu {
    z-index: 1000;
    position: absolute;
    background: #222;
    padding: 15px;
    border-right: 2px solid white;
    visibility: hidden;
    opacity: 0;
    transition: .4s;
}

.menu ul li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
}

演示：https://jsfiddle.net/bvcc2gwz/

Css - 下拉向下滚动

2 个答案: