纯 CSS 下拉菜单 - 单击菜单外时关闭下拉菜单答案

【问题标题】：Pure css dropdown menu - Close dropdown menu when clicked outside menu纯 CSS 下拉菜单 - 单击菜单外时关闭下拉菜单
【发布时间】：2020-12-05 03:01:05
【问题描述】：

<ul id="menu">
   <li>
   <input id="check01" type="checkbox" name="menu"/>
   <label for="check01">Tasto menu 01</label>
 <ul class="submenu">
  <li><a href="#">Sotto menu 1</a></li>
  <li><a href="#">Sotto menu 2</a></li>
</ul>
 </li>
  <li>
   <input id="check02" type="checkbox" name="menu"/>
    <label for="check02">Tasto menu 02</label>
    <ul class="submenu">
  <li><a href="#">Sotto menu 3 (long text)</a></li>
  <li><a href="#">Sotto menu 4</a></li>
  <li><a href="#">Sotto menu 5</a></li>
</ul>
 </li>
    </ul>
      <article>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate earum nulla 
 asperiores corrupti eius maxime laboriosam voluptates sequi at iure consequatur suscipit voluptatibus magnam alias harum incidunt quis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam officia labore maiores perspiciatis nulla aperiam magnam dicta commodi debitis distinctio temporibus in saepe unde. Incidunt vel labore accusamus voluptas eligendi. 
   </p>
   </article>
 <style>
 /*General styles for body*/
 body{
 margin:0;
 padding:3em 0;
 font-family:Helvetica, Arial, sans-serif;
 background:#eee;
 color:#222;
 }

 article{margin:10px;}

  /*Style for the first level menu bar*/
  ul#menu{
   position:fixed;
   top:0;
   width:100%;
   height:3em;
  margin:0;
   padding:0 10px;
   background:#333;
    color:#eee;
   box-shadow:0 -1px rgba(0,0,0,.5) inset;
  }

  ul#menu > li{
    float:left;
    list-style-type:none;
   position:relative;
   }

   label{
    position:relative;
    display:block;
   padding:0 18px 0 12px;
   line-height:3em;
   transition:background 0.3s;
   cursor:pointer;
  }

   label:after{
   content:"";
   position:absolute;
   display:block;
   top:50%;
   right:5px;
   width:0;
   height:0;
   border-top:4px solid rgba(255,255,255,.5);
   border-bottom:0 solid rgba(255,255,255,.5);
   border-left:4px solid transparent;
  border-right:4px solid transparent;
    transition:border-bottom .1s, border-top .1s .1s;
    }

  label:hover,
  input:checked ~ label{background:rgba(0,0,0,.3);}

  input:checked ~ label:after{
   border-top:0 solid rgba(255,255,255,.5);
   border-bottom:4px solid rgba(255,255,255,.5);
    transition:border-top .1s, border-bottom .1s .1s;
     }

  /*hide the inputs*/
   input{display:none}

   /*show the second levele menu of the selected voice*/
   input:checked ~ ul.submenu{
    max-height:300px;
    transition:max-height 0.5s ease-in;
   }

  /*style for the second level menu*/
 ul.submenu{
   max-height:0;
   padding:0;
   overflow:hidden;
 list-style-type:none;
 background:#444;
   box-shadow:0 0 1px rgba(0,0,0,.3);
   transition:max-height 0.5s ease-out;
   position:absolute;
   min-width:100%;
  }

  ul.submenu li a{
     display:block;
    padding:12px;
    color:#ddd;
    text-decoration:none;
    box-shadow:0 -1px rgba(0,0,0,.5) inset;
    transition:background .3s;
     white-space:nowrap;
   }

   ul.submenu li a:hover{
     background:rgba(0,0,0,.3);
   }
    </style>

我正在用这个概念https://codepen.io/Tont/pen/hdsev构建一个纯css下拉菜单@

菜单按预期工作，当用户点击顶部菜单项时，下拉菜单会切换。

如果在菜单外的任何地方有点击，我想关闭任何下拉菜单。

如何使用纯 css 而不使用 JavaScript 来实现这一点？

我知道如何用 JavaScript 实现这一点，正在寻找 Css 解决方案

【问题讨论】：

我看不出没有 JS 怎么办。使用 JS，您可以使用事件列表器来监听鼠标点击，并使用 if 语句检查点击是在菜单内还是在菜单外。或者为关闭菜单的所有其他内容使用 onclick 事件。因为 HTML 和 CSS 中没有父选择器，也没有一种方法来识别点击并在复选框之外对其进行操作。除非您单击该特定复选框，否则您无法取消选中没有 JS 的复选框。
你必须使用 Javascript，如果你决定这样做，这里还有另一个问题可能会提供答案，stackoverflow.com/questions/152975/…

标签： html css drop-down-menu dropdown

【解决方案1】：

CSS 不能用于此目的。您实际上是在尝试“监听”用户何时在所选区域之外单击。

要监听它，您需要一个来自 Javascript 的事件监听器。然后，您可以添加 display:none 或任何适合您目的的样式属性。

这个解决方案只需要几行 JavaScript，但是没有 JavaScript 事件监听器就无法监听点击。

【讨论】：