Dropdown menu on css

Question:

Greetings!

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.

Answer:

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> 
</ul> 

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