BLOCK 2

Submenu 1

Submenu 2

Submenu 3

<div class="iconmenu">
  <label class="iconblock">
   <input type="radio" name="icon">
   <div class="icon">
    <i class="fa fa-shopping-cart"></i>
    <div class="iconcontent">
     <label class="close"><input type="radio" name="icon"><i class="fa fa-close"></i></label>
	  ...
    </div>  
   </div>
  </label>    
 </div> 
 
.iconmenu {float:right;}
.iconmenu input[type="radio"]{display:none;}
.iconmenu .iconblock{display:inline-block;margin-left:-3px;text-align:center;}
.iconmenu i {width:50px;line-height:50px;font-size:35px;cursor:pointer;}
.iconmenu .iconcontent {display:none;position:absolute;z-index:900;top:50px;right:0;width:100%;}
.iconmenu .close {clear:both;display:block;width:100%;text-align:right;cursor:pointer;}
.iconmenu .close i {text-align:center;}
@media screen and (min-width:769px){
 .iconmenu .icon:hover .iconcontent{display:block;}
 .iconmenu .close{display:none;}
}
@media screen and (max-width:768px){
 .iconmenu input[type="radio"]:checked + .icon .iconcontent {display:block;}
}

BLOCK 1

BLOCK 2

BLOCK 3

BLOCK 4