#menu {
background: #0099CC;
color: #FFF;
height: 45px;
padding-left: 18px;
border-radius: 10px;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 45px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #0099CC;
background: #F2F2F2;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 45px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 45px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261"; 
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
@media screen and (max-width: 800px){
#menu {position:relative}
#menu ul {background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.sub-menus {width:100%;position:static;}
#menu ul.sub-menus a {padding-left:30px;}
#menu li {display:block;float:none;width:auto;}
#menu input, #menu label {position:absolute;top:0;left:0;display:block}
#menu input {z-index:4}
#menu input:checked + label {color:white}
#menu input:checked + label:before {content:"\00d7"}
#menu input:checked ~ ul {display:block}
}