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">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
  <div class="menu">
  <div class="dropdowns">
    <div class="dropdown dropdown1">
      <button class="dropbtn">DIV 1</button>
      <div class="dropdown-menu">
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          <a href="#">Link 4</a>
          <a href="#">Link 5</a>
        </div>
      </div>
    </div>
    <div class="dropdown dropdown2">
      <button class="dropbtn">DIV 2</button>
      <div class="dropdown-menu">
        <div class="dropdown-content">
          <a href="#">Link 6</a>
          <a href="#">Link 7</a>
          <a href="#">Link 8</a>
          <a href="#">Link 9</a>
          <a href="#">Link 10</a>
        </div>
      </div>
    </div>
    <div class="dropdown dropdown3">
      <button class="dropbtn">DIV 3</button>
      <div class="dropdown-menu">
        <div class="dropdown-content">
          <a href="#">Link 11</a>
          <a href="#">Link 12</a>
          <a href="#">Link 13</a>
          <a href="#">Link 14</a>
          <a href="#">Link 15</a>
        </div>
      </div>
    </div>
  </div>
</div>
  
</body>
</html>
 
.menu {
  position: relative;
  top: 0px;
  display: flex;
  flex-direction: column;
  width: 235px;
  height: auto;
  margin: auto;
  padding: auto;
  border-bottom-color: rgba(0, 5, 10, 1.00);
  background-color: rgba(0, 5, 10, 1.00);
  background-repeat: repeat;
  background-clip: content-box;
}
​
.dropbtn {
  /* style the buttons*/
  position: relative;
  background-color: rgba(40, 40, 40, 1.00);
  color: darkorange;
  padding: 10px;
  margin-left: 0px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  font-family: monospace;
  width: 235px;
  transition: background 0.3s ease;
  cursor: pointer;
}
​
.dropdowns {
  /*initialize the revealing sliding menu*/
  margin: auto;
  display: block;
}
​
.dropdown-menu {
  overflow: hidden;
  height: 0;
}
​
.dropdown-menu .dropdown-content {
  display: block;
  background-color: black;
}
​
.dropdown-content a {
  display: block;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
}
​
.dropdown-menu a:hover {
  background-color: darkorange;
  color: #000000;
}
​
.dropdown:hover .dropdown-menu {
  height: auto;
}
​
.dropdown:hover .dropbtn {
  background-color: rgba(65, 65, 65, 1.00);
  color: white;
}
Output

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

Dismiss x
public
Bin info
guilhermemullerpro
0viewers