Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Flexbox Menu Example</title>
<style>
  ul {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    list-style-type: none;
    width: 300px;
    background-image: -webkit-linear-gradient(top, whiteSmoke 0%,#EEE 100%);
    padding: 10px;
    -webkit-box-shadow: 2px 2px 6px #aaa;
    display: -webkit-flexbox;
    -webkit-flex-wrap: wrap;
  }
  
  li {
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    display: block;
    padding: 5px;
    border: 1px solid black;
    -webkit-flex: 60px 1;
  }
  
  li:hover {
      -webkit-box-shadow: inset 0 3px 5px 
rgba(0, 0, 0, .2);
  }
  
</style>
  
</head>
<body>
  <ul>
    <li>Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact Us</li>
  </ul>  
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers