.menu ul{ list-style:none; position:relative; }
.menu ul li{ width:122px; float:left; }

.menu a {padding:12px;   display:block; text-decoration:none;   text-align:center;  color:#fff;}
.menu{max-width:100%; padding-left:280px; height:150px; padding-top:45px; z-index:2; position:relative;   }

.menu ul ul {position:absolute; visibility:hidden; }
.menu ul li:hover ul {visibility:visible;}
.menu a:hover{background-color:#1499E5; color:#fff; }
.menu ul li li {float:none; }
.menu ul ul li a{background-color:#1499E5; width:200px; text-align:left; }
.menu ul ul li a:hover{background-color:#000;}

label[for="bt_menu"]{padding:5px; background-color:#222;  color:#fff;  font-weight:400; text-align:center; font-size:30px; cursor:pointer; width:50px; height:50px; }

label[for="bt_menu"]{
display:none;
 float:right;

}

#bt_menu{display:none; float:right; }


@media(max-width:880px){

label[for="bt_menu"]{
display:block;
z-index:3; position:relative;

}

.menu{width:100%; height:80px; padding-top:50px; margin-left:50px; background-color:#222; f z-index:2;  position:relative;}

#bt_menu:checked~.menu{margin-left:0; }
.menu{ margin-left:-100%;  padding-left:0; transition:all .4s; position:relative;  }
.menu ul li {width:100%; float:none; z-index:3; position:relative; }
.menu ul ul {position:static; overflow:hidden; max-height:0; transition:all .4s;  }
.menu ul ul li a{background-color:#1C6BB6; width:100%; text-align:center; font-weight:400; }
.menu ul ul li a:hover{background-color:#000;}
.menu ul li:hover ul{height: auto; max-height:200px;}
.menu a {padding:15px;   display:block; text-decoration:none; text-align:center; background-color:#1499E5; color:#fff;}
.menu a:hover { background-color:#000;}
}