Html 不需要Javascript的弹出菜单

我正在努力完成我的项目，我希望能够采用Javascript不需要的方式来获得网站的完整体验

所以我想出了一个解决办法，将打开和关闭状态保存为弹出菜单和边栏。。。我做了一个隐藏的复选框，用CSS的魔力我可以切换一个DIV的可视性。到目前为止还不错

#header-profile-popup{
  visibility: hidden;
  opacity: 0;}
 #header-profile-popup-toggler:checked ~ * #header-profile-popup{
  visibility: visible;
  opacity: 1;}

进入工作弹出菜单

但是我想知道，如果用户在div之外单击以自动隐藏它，您是否可以想出一种方法来删除它

如果它是HTML/CSS格式的，我会更喜欢它，但如果它是由本机javascript检测到的，那就没什么大不了的了

---

谢谢你抽出时间

这花了一些时间，但我想出了一个解决办法

您可以看到正在运行的弹出菜单，因为它是我的目标，它在没有Javascript驱动的情况下工作。但是如果您激活了Javascript，它还会检测您是否在div之外单击并关闭弹出窗口

var isOutSide = true,
bbb=document.getElementById('header-profile-popup'),
bbb2=document.getElementById('header-profile-popup-toggler'),
bbb3=document.getElementById('header-profile-popup-toggler-label');
document.body.addEventListener('click', function(){
   if(isOutSide){
       document.getElementById("header-profile-popup-toggler").checked = false;
   }
   isOutSide = true;
});

bbb.addEventListener('click', function(){
   isOutSide = false;
});
bbb2.addEventListener('click', function(){
   isOutSide = false;
});
bbb3.addEventListener('click', function(){
   isOutSide = false;
});