如何在单击焦点(仅CSS)时创建嵌套下拉菜单

Question

我以前询问过有关如何通过CSS进行下拉菜单的问题。现在我已经可以工作了。但是现在我需要在单击时做出反应。我要创建的菜单将有2组嵌套的列表项目。我正在使用伪选择器：专注于第一级列表项目。但是，当我尝试显示嵌套列表项目时，我当然会失去焦点部分。在用户更深入菜单时，是否可以以某种方式保持第一级列表项目以保持专注？

我的html代码就像这个

<header class="Header"> 
  <!-- Head navigation-->
  <div> 
  <a href="#" title="cart"> <img src="images/cart_logo_webb_design.svg" alt="cart"></a>
  <a href="#" title="Search"> <img src="images/search_logo_webb_design.svg" alt="search glass"></a> 
  </div>
  <div> <img src="images/k_logo_webb_design.svg" alt="CompanyLogo"> </div>
  <div>
  <nav id="MainNavigation">
   <a href="#" id="menuIcon"><img src="images/menu_logo_webb_design.svg" alt="Menu icon"></a>
    <ul id="dropDownMenu">
      <li>
       <a class="Sub_Menu_Link" href="#" title="Woman">Woman
       </a>
       <li>
       <a class="Sub_Menu_Link" href="#" title="Womanplus">+
       </a>
        <ul>
          <li><a href="#">1</a> </li>
          <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
          <li><a href="#">4</a> </li>
          <li><a href="#">5</a> </li>
        </ul>
        </li>
      </li>
      <li> <a class="Sub_Menu_Link" href="#" title="Man">Man</a>
       <li>
       <a class="Sub_Menu_Link" href="#" title="Manplus">+
       </a>
        <ul>
          <li><a href="#">1</a> </li>
          <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
          <li><a href="#">4</a> </li>
          <li><a href="#">5</a> </li>
        </ul>
        </li>
      </li>
      <li><a class="Sub_Menu_Link" href="#" title="Sale">Sale</a></li>
    </ul>
  </nav>
  </div>
</header>

header {
  position: fixed;
  display: block;  
  background: white;
  z-index: 1;
  width: 100%;
  top: 0;
}
.Header img {
  width: 36px;
  height: 40px;
  }
header div {
  float: right;
  width: 33.33%;
  margin: 0;
}
header div:first-of-type a {
  padding: 0%;
}

header div:after {
  content: "";
  visibility: hidden;
  display: block;
  clear: both;
}
nav {
  position: relative;
  left: 0;
}

nav > ul {
  margin: 0;
  padding: 0 0px;;
  float: left;
  line-height: 40px;
}
nav a {
  positon: absolute;
  left: 0;
}
nav ul ul {
  padding: 20px;
}
nav ul a {
  list-style: none;
  text-decoration: none;
}
nav ul ul li a {
  display: inline-block;
}
nav > ul:after {
  content: "";
  visibility: hidden;
  display: block;
  clear: both;
}
.Sub_Menu_Link {
  display: inline-block;
  padding: 10px 0px;
  line-height: 40px;
}
.Sub_Menu_Link:hover {
  color: yellow;
}
nav ul {
  background: #E9E9E9;
  position: relative;
  width: 100%;
}
nav ul ul li a:hover {
  color: yellow;
}
nav ul ul {
  display: none;
}
nav ul a:focus {
  background: red;
}
nav ul a:focus ~ ul {
  display: block;
}
nav > a:hover {
  background-color: red;
}
nav > a:focus {
  background-color: green;
}
nav ul {
  display: none;
}
nav > a:focus ~ ul {
  display: block;
}

Answer 1

不可能仅使用:focus选择器进行操作。在CSS中，您无法选择元素的父母，以便关注孩子的可见度。例如：

element:focus -parent { /* this doesn't exist */ }

目前根本不存在。而且，您也不能专注于多个元素，这增加了问题。

有两种方法可以想到解决您的问题：

1. 使用JavaScript事件onclick代替仅CSS方法;
2. 维护仅CSS的方法并使用input:checked而不是:focus用于触发器。它被称为复选框黑客。