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>
<body>
  <ul class="root">
    <li><a href="#">Home</a></li>
    <li>
      <input type="checkbox" name="z" />
      <a href="#">Products</a>
      
      <ul>
        <li>
          <input type="checkbox" name="z" />
          
          <a href="#">T-Shirts</a>
          
           <ul>
             <li><a href="#">Type 1</a></li>
             <li><a href="#">Type 2</a></li>
             <li><a href="#">Type 3</a></li>
             <li><a href="#">Type 4</a></li>
           </ul>
        </li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Accessories</a></li>       
        </ul>
     </li>
    <li><a href="#">Stores</a></li>
    <li><a href="#">Discounts</a></li>
    <li><a href="#">Contacts us</a></li>
  </ul>
</body>
</html>
 
* {
  margin:0;
  padding:0;
}
​
body {
  margin:100px 50px 0;
}
​
.root a {
  color:inherit;
  text-decoration:none;
}
​
.root {
  list-style:none;
  width:100%;
  height:40px;
  text-align:justify;
  
  background:
    linear-gradient(#444 0%, #fff 40%,
    #fff 60%, #444 100%);
  
   background:
    -webkit-linear-gradient(#444 0%, #fff 40%,
    #fff 60%, #444 100%);
  
   background:
    -moz-linear-gradient(#444 0%, #fff 40%,
    #fff 60%, #444 100%);
  
   background:
    -o-linear-gradient(#444 0%, #fff 40%,
    #fff 60%, #444 100%);
  
   background:
    -ms-linear-gradient(#444 0%, #fff 40%,
    #fff 60%, #444 100%);
  
  box-shadow: 0px 3px 4px -2px;
  -webkit-box-shadow: 0px 3px 4px -2px;
  -moz-box-shadow: 0px 3px 4px -2px;
  
  border-radius:8px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
 
  font: bold 12px "Segoe UI", Helvetica, sans-serif;
  
  color:#444;
  text-shadow: 0 1px rgba(100,100,100,0.1);
  
  min-width:450px;
}
​
.root:after {
  content:"";
  display:inline-block;
  width:100%;
}
​
.root>li {
  display:inline-block;
 
  height:40px;
  line-height:40px;
  position:relative;
  
}
​
​
.root>li>a {
  display:block;
 
  padding:0 15px;
 
  
 
}
​
.root>li:not(:first-child)>a {
   border-left:solid 1px #444;
  
   box-shadow: -2px 0 2px #fff,
    inset 1px 0 1px #333;
  
   -webkit-box-shadow: -2px 0 2px #fff,
    inset 1px 0 1px #333;
  
   -moz-box-shadow: -2px 0 2px #fff,
    inset 1px 0 1px #333;
}
​
.root>li>a:not(:only-child) {
  
  padding-left:40px;
}
​
.root>li input {
  position:absolute;
  left:15px;
  top:50%;
  z-index:1000;
  height:0;
  width:0;
  margin-top:-5px;
  cursor:pointer;
}
​
.root>li input:after {
  content:"";
  position:absolute;
  border:solid;
  border-width:10px 5px 0;
  border-color:white transparent;
}
​
.root>li input:before {
  content:"";
  position:absolute;
  left:-1px;
  top:2px;
  border:solid;
  border-width:10px 6px 0;
  border-color:#444 transparent;
}
​
​
li ul {
  list-style:none;
  position:absolute;
  top:100%;
  margin-top:5px;
  left:0;
  width:150%;
 
  max-height:0;
  overflow:hidden;
  padding:0;
  
  transition:all 0.5s ease-in-out;
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition:all 0.5s ease-in-out;
  -o-transition:all 0.5s ease-in-out;
  
  background:#444;
  color:white;
  line-height:20px;
  
  box-shadow:inset 0 1px 1px #fff,
    inset 0 -1px 2px #000,
    2px 2px 1px rgba(0,0,0,0.5);
  
  -webkit-box-shadow:inset 0 1px 1px #fff,
    inset 0 -1px 2px #000,
    2px 2px 1px rgba(0,0,0,0.5);
  
  -moz-box-shadow:inset 0 1px 1px #fff,
    inset 0 -1px 2px #000,
    2px 2px 1px rgba(0,0,0,0.5);
    
}
​
li ul li {
   position:relative;
  text-align:right;
  padding-right:30px;
  height:20px;
}
​
.root li ul li input {
  left:auto;
  right:20px;
  margin-top:-6px;
}
​
.root li ul li input:before {
  left:0;
  top:0;
    border-width:6px 0 6px 10px;
  border-color:transparent white;
}
​
.root li ul li input:after {
    border-width:4px 0 4px 8px;
  border-color:transparent #444;
  left:-1px;
  top:2px;
}
​
li ul li a {
  line-height:20px;
  border-bottom:dotted 1px;
  
  transition:all 0.2s ease-in-out;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
}
​
​
li ul ul {
  top:100%;
  left:103%;
  margin-top:-20px;
  
  width:150px;
  
  max-width:0;
  max-height:400px;
  
  background:#743;
  list-style:disc;
  
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
​
li ul ul li {
  text-align:left;
  width:150px;
  padding:0;
  margin-left:30px;
}
​
li ul ul li:before {
  content:"";
  float:left;
  width:10px;
  height:21px;
}
​
li ul ul li a {
  border:none;
}
​
li input:checked ~ ul {
  
  overflow:visible;
  max-height:400px;
   padding:10px 0;
  
}
​
li li input:checked ~ ul {
  
  max-width:400px;
}
​
li input:checked+a {
  color:red;
  
  text-shadow:0 0 6px
    rgba(255,150,150, 0.8);
}
​
li li input:checked+a {
  font-size:18px;
  color:inherit;
  text-shadow:none;
  border:none;
}
​
​
​
​
​
​
​
 
​
Output

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

Dismiss x
public
Bin info
dmkimpro
0viewers