html - Css - make drop down scroll down -


here 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 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 question how can make drop down scroll down or fade in css transitions, tried adding this: https://davidwalsh.name/css-slide didnt work doing trying reverse slides down top , not bottom not work, tryed 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 not want use javascript.

thank you

you cant use display none transitions not work, use visibility or min-height or opacity, demo uses opacity , visibility here 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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -