Javascript 仅使用CSS关闭菜单

我成功地删除了手机设计中的javascript，并仅通过CSS打开侧菜单。我的配菜是：

<div class="all-content">
    <div id="menu-content" class="menu-content">
        .... menu content....
    </div>
</div>

而且效果很好

我想要的是在不使用javascript的情况下通过单击“菜单外的任何位置”来关闭此菜单

我知道单击任何链接都会关闭此菜单，但我找不到如何绑定整个内容

谢谢你

制作一个复选框，并使用

opacity:0将其基本隐藏起来

使其覆盖大面积，宽度/高度：500px

使其

position:absolute

不影响周围元素的位置

编写css样式以隐藏

：checked

复选框的同级

#复选框：选中~。菜单内容{
显示：无；
}
#复选框{
宽度：500px；
高度：500px；
不透明度：0；
位置：绝对位置；
}

配菜

如果答案没有帮助，或者您的意思是别的，请告诉我

 <a href="#menu-content"><i class="fa fa-navigation></i></a>

.menu-content{
    opacity: 0;
    z-index: 0;
    left: -100%;
}

.menu-content:target{
    opacity: 1;
    z-index: 1000;
    left: 0px;
}