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>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <style>
    #thediv {
      //margin-top: 100px;
      width: 150px;
    }
    #thediv .content {
      display: none;
      position: relative;
​
    }
    #thediv .content:hover {
      display: block; 
    }
    #thediv:active {
​
    }
    #thediv:active .content {
      display: block;
    }
    .content .spacer {
      position:absolute;  
      height: 50px; 
      width: 100%;
    }
    
  </style>
  
<body>
  <div id="thediv">
    <div class="menu-header">
      A Menu
    </div>
    <div class="content"> 
      <div class="spacer" style="top:-50px;"></div>
      <div class="sub">
        item one
      </div>
      <div class="sub">
        item two
      </div>
      <div class="sub">
        item three
      </div>
      <div class="spacer" style="bottom:-50px;"></div>
    </div>
  </div>
  <div>
    More content
  </div>
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers