Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="expanded">Item 3
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
      <li>Sub-item 3</li>
    </ul>
  </li>
  <li>Last item</li>
</ul>
</body>
</html>
 
jQuery(function($){
  var timerOut;
  
  $('.expanded').on('mouseover', function(){
    clearTimeout(timerOut);
    var self = this;
    setTimeout(function(){
      $('ul', self).show();
    }, 300);
    
  }).on('mouseout', function() {
    var self = this;
    timerOut = setTimeout(function() {
      $('ul', self).hide();
    }, 300);
    
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
JGrubbpro
0viewers