body {
background : #eee;
font : 13px 'trebuchet MS', Arial, Helvetica;
}
#nav, #nav ul {
margin : 0;
padding : 0;
list-style : none;
}
#nav .fa {
font-size : 12px !important ;
padding-right : 10px;
}
#nav {
width : 960px;
margin : 5px auto;
border : #92d421 solid 1px;
background : linear-gradient(to bottom, #6ba500 0%, #91d220 100%) #55a428;
border-radius : 6px;
box-shadow : 0 1px 1px #777, 0 1px 0 #666 inset;
}
#nav:before, #nav:after {
content : "";
display : table;
}
#nav:after {
clear : both;
}
#nav li {
float : left;
border-right : 1px solid #fddf00;
box-shadow : 1px 0 0 #444;
position : relative;
}
#nav a {
float : left;
padding : 12px 15px 12px 15px;
color : white;
text-transform : uppercase;
font : 12px Helvetica;
text-decoration : none;
text-shadow : 1px 1px 1px #474747;
}
#nav li:hover > a {
color : black;
}
#nav ul {
margin : 20px 0 0 0;
opacity : 0;
visibility : hidden;
position : absolute;
top : 38px;
left : 0;
z-index : 1;
background : linear-gradient(to bottom, #696969 0%, black 100%) black;
box-shadow : 0 -1px 0 rgba(255, 255, 255, 0.3);
border-radius : 3px;
transition : all 0.2s ease-in-out;
}
#nav li:hover > ul {
opacity : 1;
visibility : visible;
margin : 0;
}
#nav ul ul {
top : 0;
left : 150px;
margin : 0 0 0 20px;
box-shadow : -1px 0 0 rgba(255, 255, 255, 0.3);
}
#nav ul li {
float : none;
display : block;
border : 0;
box-shadow : 0 1px 0 #111, 0 2px 0 #666;
}
#nav ul li:last-child {
box-shadow : none;
}
#nav ul a {
padding : 10px;
width : 200px;
display : block;
white-space : nowrap;
float : none;
text-transform : none;
}
#nav ul a:hover {
background-color : #47b029;
background-image : linear-gradient(#45ba24, #47b029);
color : #fff;
}
#nav ul li:first-child > a {
border-radius : 3px 3px 0 0;
}
#nav ul li:first-child > a:after {
content : '';
position : absolute;
left : 40px;
top : -6px;
border-left : 6px solid transparent;
border-right : 6px solid transparent;
border-bottom : 6px solid #444;
}
#nav ul ul li:first-child a:after {
left : -6px;
top : 50%;
margin-top : -6px;
border-left : 0;
border-bottom : 6px solid transparent;
border-top : 6px solid transparent;
border-right : 6px solid #3b3b3b;
}
#nav ul li:first-child a:hover:after {
border-bottom-color : #45ba24;
}
#nav ul ul li:first-child a:hover:after {
border-right-color : #45ba24;
border-bottom-color : transparent;
}
#nav ul li:last-child > a {
border-radius : 0 0 3px 3px;
}
#nav-trigger {
display : none;
}
input[type="checkbox"] {
display : none;
}
.fa-bars {
display : none !important ;
}
@media screen and (max-width:600px) {
#nav-wrap {
position : relative;
margin-top : -20px;
}
.fa-bars {
display : block !important ;
}
input[type="checkbox"] {
display : block;
opacity : 0;
height : 48px;
width : 48px;
}
input[type="checkbox"] + span {
height : 31px;
width : 31px;
position : absolute;
z-index : -1;
margin-top : -50px;
color : #4B4D58;
padding : 5px;
font-size : 35px;
}
input[type="checkbox"]:checked + span {
background : #4B4D58;
height : 31px;
width : 31px;
padding : 0 0 0 0;
color : #fff;
padding : 5px;
font-size : 35px;
}
#nav-trigger {
display : block;
cursor : pointer;
}
#nav-wrap * {
box-sizing : border-box;
}
#nav {
margin : 0;
padding : 10px 0;
position : absolute;
top : 40px;
width : 100%;
z-index : 1;
}
#nav:after {
content : '';
position : absolute;
left : 25px;
top : -7px;
border-left : 8px solid transparent;
border-right : 8px solid transparent;
border-bottom : 8px solid #4B4D58;
}
#nav ul {
position : static;
visibility : visible;
opacity : 1;
margin : 0;
display : none;
}
#nav ul ul {
margin : 0 0 0 20px !important ;
}
#nav li {
position : static;
display : block;
float : none;
border : 0;
padding : 5px;
width : 100%;
padding-bottom : 10px;
border-bottom : 1px solid #4B4D58;
background : #333;
text-shadow : none !important ;
}
#nav li:hover ul {
display : block;
}
#nav ul li:hover ul ul {
display : block;
}
label {
display : block;
}
label ~ input[type="checkbox"] ~ #nav-wrap #nav {
display : none;
}
#nav a {
display : block;
float : none;
padding : 0;
color : #fff;
}
#nav a:hover {
color : #fafafa;
}
#nav ul a {
padding : 0;
width : auto;
}
#nav ul a:hover {
background : none;
}
#nav ul li:first-child a:after, #nav ul ul li:first-child a:after {
border : 0;
}
}
@media screen and (min-width:600px) {
#nav {
display : block !important ;
}
}
.no-transition {
transition : none;
opacity : 1;
visibility : visible;
display : none;
}
#nav li:hover > .no-transition {
display : block;
}