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

Question

我之前问过一个关于如何通过css制作下拉菜单的问题。现在我已经让它工作得很漂亮了。但现在我需要让它对点击使用react。我尝试创建的菜单将包含 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 作为触发器。它被称为 The Checkbox Hack .