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 class="no-js">
<head>
<meta charset="utf-8">
​
<style>
    body {margin:60px; font-family: sans-serif; font-size:12px;}
    ul,ul ul {margin:0;padding:0;} 
    ul li {
        position:relative;
        list-style-type: none;
        padding:5px 0;
        margin:0 10px;
        cursor:pointer;
        border-bottom:1px solid #ddd;
        display:inline-block;
        float:left;     
    }
    .submenu {
        background:#eee;
        display:none;
        position:absolute;
        width:200px;        
        top:25px;
        left:0;
        margin-left:-5px;
    }
    .hover {
        display:block !important;
    }
</style>
</head>
<body>
​
<nav id="navigation">
<ul>
    <li class="drop">Option 1
        <div class="submenu">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>          
        </div>
    </li>
    <li class="drop">Option 2
    <div class="submenu">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            </ul>          
        </div>
    </li>
</ul>
</nav>
​
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
​
<script>
​
$(document).ready(function(){
    
    (function(){
        
        var topNav = $('#navigation'),
            drop = topNav.find('.drop'),
            myTimer;                
                        
      drop.hover(function(){        
        var obj = $(this);
        var subMenu = obj.find('.submenu');
        clearTimeout(myTimer);
        if(subMenu.hasClass('hover')) {
          //do nothing
        } else {
          drop.find('.submenu').removeClass('hover');
          subMenu.addClass('hover');
        }
      }, function(){
        myTimer = setTimeout(function(){                
            drop.find('.submenu').removeClass('hover');
        },600); 
      });       
        
    })();   
​
});
​
​
​
</script>
​
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers