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; }
Comments
Post a Comment