J. Doe J. Doe - 3 months ago 8
CSS Question

Css - make drop down scroll down

Here is my css code:

.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;
}


Here is my html code:

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


Here is my question how can I make my drop down scroll down or fade in with Css transitions, I tried adding this: https://davidwalsh.name/css-slide but it didnt work what i was doing is trying to reverse it so it slides down from the top and not the bottom but it does not work, so then i tryed this code:

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


it still did not work please help.

I DO NOT WANT TO USE JAVASCRIPT.

Thank You

saj saj
Answer

You cant use display none with transitions it will not work, use visibility or min-height or opacity, this demo uses opacity and visibility here it is in code-pen 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;
}

Demo: https://jsfiddle.net/bvcc2gwz/

Comments