- {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
} body {
background: #f0f0f0;
} .content {
margin: 100px auto; width: 260px;
} .colors {
float: left; margin: 20px auto; width: 260px;
} .colors a {
float: left; height: 30px; width: 33.33333333%;
} .colors .default {
background: #414956;
} .colors .blue {
background: #4a89dc;
} .colors .white {
background: #ffffff;
} .menu {
box-shadow: 0 20px 50px #333333; float: left; font-family: Raleway,'Open Sans', sans-serif; min-width: 260px; outline: 0; position: relative;
} .menu * {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Raleway,'Open Sans', sans-serif; outline: 0;
} .menu .menu-footer {
background: #414956; color: #f0f0f0; float: left; font-weight: normal; height: 50px; line-height: 50px; font-size: 6px; width: 100%; text-align: center;
} .menu .menu-header {
background: #414956; color: #f0f0f0; font-weight: bold; height: 100px; line-height: 100px; text-align: center; width: 100%;
} .menu ul {
list-style: none; margin: 0; padding: 0;
} .menu ul li {
display: block; float: left; position: relative; width: 100%;
} .menu ul li a {
background: #414956; color: #f0f0f0; float: left; font-size: 13px; overflow: hidden; padding: 14px 22px; position: relative; text-decoration: none; white-space: nowrap; width: 100%;
} .menu ul li a i {
float: left; font-size: 16px; line-height: 18px; text-align: left; width: 34px;
} .menu ul li .menu-label {
background: #f0f0f0; border-radius: 100%; color: #555555; font-size: 11px; font-weight: 800; line-height: 18px; min-width: 20px; padding: 1px 2px 1px 1px; position: absolute; right: 18px; text-align: center; top: 14px;
} .menu ul .submenu {
display: none; position: static; width: 100%;
} .menu ul .submenu .submenu-indicator {
line-height: 16px;
} .menu ul .submenu li {
clear: both; width: 100%;
} .menu ul .submenu li ul.submenu {
display: none; position: static; width: 100%; overflow: hidden;
} .menu ul .submenu li a {
background: #383838; border-left: solid 6px transparent; border-top: none; float: left; font-size: 11px; position: relative; width: 100%;
} .menu ul .submenu li:hover > a {
border-left-color: #414956;
} .menu ul .submenu li .menu-label {
background: #f0f0f0; border-radius: 100%; color: #555555; font-size: 11px; font-weight: 800; line-height: 18px; min-width: 20px; padding: 1px 2px 1px 1px; position: absolute; right: 18px; text-align: center; top: 12px; top: 14px;
} .menu ul .submenu > li > a {
padding-left: 30px;
} .menu ul .submenu > li > ul.submenu > li > a {
padding-left: 45px;
} .menu ul .submenu > li > ul.submenu > li > ul.submenu > li > a {
padding-left: 60px;
} .menu .submenu-indicator {
-moz-transition: "transform .3s linear"; -o-transition: "transform .3s linear"; -webkit-transition: "transform .3s linear"; transition: "transform .3s linear"; float: right; font-size: 20px; line-height: 19px; position: absolute; right: 22px;
} .menu .submenu-indicator-minus > .submenu-indicator {
-moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
} .menu > ul > li.active > a {
background: #3b424d; color: #ffffff;
} .menu > ul > li:hover > a {
background: #3b424d; color: #ffffff;
} .menu > ul > li > a {
border-bottom: solid 1px #3b424d;
} .ink {
-moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); background: rgba(255, 255, 255, 0.3); border-radius: 100%; display: block; position: absolute; transform: scale(0);
} .animate-ink {
-moz-animation: ripple .3s linear; -ms-animation: ripple .3s linear; -o-animation: ripple .3s linear; -webkit-animation: ripple .3s linear; animation: ripple .3s linear;
} @-moz-keyframes 'ripple' {
100% { opacity: 0; transform: scale(2.5); }
} @-webkit-keyframes 'ripple' {
100% { opacity: 0; transform: scale(2.5); }
} @keyframes 'ripple' {
100% { opacity: 0; transform: scale(2.5); }
} .blue.menu .menu-footer {
background: #3396f3;
} .blue.menu .menu-header {
background: #3396f3;
} .blue.menu ul li > a {
background: #3396f3;
} .blue.menu ul ul.submenu li:hover > a {
border-left-color: #3396f3;
} .blue.menu > ul > li.active > a {
background: #3396f3;
} .blue.menu > ul > li:hover > a {
background: #3396f3;
} .blue.menu > ul > li > a {
border-bottom-color: #3396f3;
}