如何在单击焦点时创建嵌套下拉菜单（仅限 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 selector 是不可能做到的。在 CSS 中，您不能 select 元素的父元素，以保持焦点在子元素上的可见性。例如：

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

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

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

使用 JavaScript 事件 onclick 而不是仅 CSS 的方法；
保持仅 CSS 方法并使用 input:checked 而不是 :focus 作为触发器。它被称为 The Checkbox Hack。

如何在单击焦点时创建嵌套下拉菜单（仅限 CSS）？

How to create a nested dropdown menu on click with focus (CSS only)?

html

css

drop-down-menu

onfocus