css - Delay for 1 second the disappearance of a dropdown menu when the mouse is moved away, unless it is returned -


here html navbar

<nav>     <ul id="mainnav">         <li><a href="#">a thing</a></li>         <li><a href="#">some stuff</a>             <ul>                 <li><a href="###">dropdown1</a></li>                 <li><a href="###">dropdown2</a></li>             </ul>         </li>                </ul> </nav> 

and javascript

<script type="text/javascript">  $('#mainnav ul').hide();  $('#mainnav li > a').hover(       function () {       //show submenu         $('ul', this.parentnode).stop().slidedown(0) = set        }     );  $('#mainnav li').hover(null,        function () {       //hide submenu         $('ul', this.parentnode).stop().delay(1000).slideup(0);      }); 

i got javascript jsfiddle , made work out. quite competent in html , css, apart obvious logic, javascript alien me.

with css looks this:

i'm looking css snippet that, when take mouse off (hover(null)) of dropdown menu , doesn't disappear immediately, rather delays until after second, but won't disappear if put mouse onto menu before does.

i have had look, couldn't find answer on site not addresses precise issue directly simple enough me understand.

demo should javascript not solution of case .. css better way achieve .. anyway

$(document).ready(function(){     $('#mainnav li ul').hide()     $('#mainnav li').on('mouseenter', function(){         $(this).css('background','yellow');         $(this).find('ul').slidedown(700);     });     $('#mainnav li').on('mouseleave', function(){         $(this).css('background','none');         $(this).find('ul').slideup(700);     }); }); 

in css demo

#mainnav li{     background: #eee;  } #mainnav li ul li{     background: none;  } #mainnav li:hover{    background: yellow; } #mainnav li:hover ul{     height: 100px;     transition-delay: 0s;      transition-duration: 1s; } #mainnav li ul{     overflow: hidden;     height: 0px;     transition-delay: 10s;     transition-duration: 2s; } 

transition-delay: 10s; submenu disapear after 10s wait it


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -