<div class="container">
<h1 class="title">Dropdown Menu</h1>
<ul>
<li class="dropdown">
<input type="checkbox" />
<a href="#" data-toggle="dropdown">First Menu</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li class="dropdown">
<input type="checkbox" />
<a href="#" data-toggle="dropdown">Second Menu</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li class="dropdown">
<input type="checkbox" />
<a href="#" data-toggle="dropdown">Third Menu</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</div>
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
*, *:before, *:after {
border-sizing: border-box;
border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #C0392B;
}
.dropdown {
position: relative;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
display: block;
color: white;
background: #C0392B;
box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
box-shadow: 0 1px 0 #d65548 inset, 0 -1px 0 #962d22 inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #cd3d2e;
}
.dropdown [data-toggle="dropdown"]:before {
position: absolute;
display: block;
content: '\25BC';
font-size: 0.7em;
color: #fff;
top: 13px;
right: 10px;
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
transition: transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s;
}
.dropdown > .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
transform-origin: 50% 0%;
transform-origin: 50% 0%;
transform-origin: 50% 0%;
transform-origin: 50% 0%;
transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
animation: hideAnimation 0.4s ease-out;
animation: hideAnimation 0.4s ease-out;
animation: hideAnimation 0.4s ease-out;
}
.dropdown > .dropdown-menu li {
padding: 0;
}
.dropdown > .dropdown-menu li a {
display: block;
color: #6f6f6f;
background: #EEE;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown > .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
max-height: 9999px;
display: block;
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
animation: showAnimation 0.5s ease-in-out;
animation: showAnimation 0.5s ease-in-out;
transition: max-height 2s ease-in-out;
transition: max-height 2s ease-in-out;
transition: max-height 2s ease-in-out;
transition: max-height 2s ease-in-out;
}
.dropdown > input[type="checkbox"]:checked + a[data-toggle="dropdown"]:before {
transform: rotate(-180deg);
transform: rotate(-180deg);
transform: rotate(-180deg);
transform: rotate(-180deg);
transition: transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s;
}
@keyframes showAnimation {
0% {
transform: scaleY(0.1);
transform: scaleY(0.1);
transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes showAnimation {
0% {
transform: scaleY(0.1);
transform: scaleY(0.1);
transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
}
}
@-webkit-keyframes showAnimation {
0% {
transform: scaleY(0.1);
transform: scaleY(0.1);
transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes hideAnimation {
0% {
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
}
}
@-moz-keyframes hideAnimation {
0% {
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
}
}
@-webkit-keyframes hideAnimation {
0% {
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
}
60% {
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
}
}
xxxxxxxxxx
This Html code editor help you to make strong your skill. Here you don't need to close html tags, after write a tag this editor automatic generate the closing tag.
the css editor help you to make a make good style of your design. it's recommend you for css property just press CTRL+ SPACE . and this code editor help you to detect correct css properties and wrong css properties
this JavaScript code editor help you to write your JavaScript code. and for understanding your code it's highlight your code