Dropdown menu on css



Tell me how to make a drop-down menu on click, preferably in css, with this peculiarity: the menu is removed not only by clicking on the link, but also to any place in the space outside this menu. Example: such menus are often found on Yandex and Google.


Dropdown menu on click

HTML код
<a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть подменю</a> 
<ul class="sub-menu"> 
   <li><a href="#1">подпункт 1</a></li> 
   <li><a href="#2">подпункт 2</a></li> 
   <li><a href="#3">подпункт 3</a></li> 

CSS код
   display: none; 
.main-item:focus ~ .sub-menu, 
.main-item:active ~ .sub-menu, 
   display: block; 
Scroll to Top